Flex Box by @ejeme365 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
_topApre collegamenti ipertestuali nell'elemento parent assoluto
<hr>Inserisce una linea orizzontale
<h2>Titolo di intestazione di secondo livello
<th>Definisce una cella di intestazione di una tabella HTML.

Users

Log in to search for users

Explore

Find inspiration

Generatore numeri casuali

ESAME (TORTA DELLA NONNA)

Countdown Passaporto 1

Estratti di mitologie greche

JS Elementi del linguaggio es3

Esercitazione 1

Esercitazione 1

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<title> Flex Box Review </title>
</head>

<body>
	<!--flex box start-->
	<div id="container">
		<div style="background-color:#80ffdb">One</div>
		<div style="background-color:blue";> Two</div>
		<div style="background-color:purple";>Three</div>
		<div style="background-color:green";>Four</div>
		<div style="background-color:orange";>Five</div>
	</div>
</body>

</html>

#container{
  background-color: bisque; 
  width: 90%;
 border: 5px solid black;
 padding: 5px;
 margin:30px;
 display: flex;
 justify-content:center;
 flex-direction:row;

 flex-wrap:wrap;
 align-items:flex-end;
 align-content:space-between;
}

#container div{
  width: 100px;
  height: 100px;
  flex-basis: 200px;
  flex-grow: 2;
  flex-shrink: none;
}

div:nth-last-of-type(1){
 
  background-color: red;
  
}


/*
Here's a breakdown of the flexbox-related terms from your CSS:

### Flexbox Terminology

1. **Flex Container**:
   - The element with `display: flex;` (in this case, `#container`). It establishes a flex formatting context for its direct children.

2. **Flex Items**:
   - The direct children of the flex container (e.g., the `<div>` elements inside `#container`). These are the elements that will be laid out according to flexbox rules.

3. **flex-direction**:
   - Defines the direction in which the flex items are placed in the flex container. Possible values include:
     - `row` (default): Items are placed in a row.
     - `column`: Items are placed in a column.
     - `row-reverse`: Items are placed in a row in reverse order.
     - `column-reverse`: Items are placed in a column in reverse order.

4. **flex-wrap**:
   - Determines whether flex items should wrap onto multiple lines. Values include:
     - `nowrap` (default): All items will be on one line.
     - `wrap`: Items will wrap onto multiple lines if necessary.
     - `wrap-reverse`: Items will wrap onto multiple lines in reverse order.

5. **justify-content**:
   - Aligns flex items along the main axis (horizontal by default). Possible values include:
     - `flex-start`: Items are packed toward the start of the flex container.
     - `flex-end`: Items are packed toward the end.
     - `center`: Items are centered.
     - `space-between`: Items are distributed with space between them.
     - `space-around`: Items are distributed with space around them.

6. **align-items**:
   - Aligns flex items along the cross axis (vertical by default). Possible values include:
     - `flex-start`: Items are aligned to the start of the cross axis.
     - `flex-end`: Items are aligned to the end.
     - `center`: Items are centered.
     - `baseline`: Items are aligned along their baseline.
     - `stretch` (default): Items stretch to fill the container.

7. **align-content**:
   - Aligns flex lines within the flex container when there is extra space on the cross axis. Values include:
     - `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `stretch`.

8. **flex-basis**:
   - Defines the default size of a flex item before space distribution. It can be set to a specific width or height or to `auto`.

9. **flex-grow**:
   - Defines the ability for a flex item to grow relative to the rest of the flex items in the container. A value of `0` means it won't grow, while a positive number allows it to take up more space.

10. **flex-shrink**:
    - Defines the ability for a flex item to shrink relative to the rest of the flex items in the container. A value of `1` (default) means it can shrink, while `0` means it won't.

These properties work together to create a flexible and responsive layout that adapts to various screen sizes and content amounts. Let me know if you need further clarification on any specific term!
 */

/* some() and every() */
const numbers = [1,2,4,6,7];
const print = numbers.some(result => result % 2 === 0)
// console.log(print);


/* every() method */
const num = [1,2,4,6,7];
const printAns = num.every(function(ans){
  return ans % 2 === 0;
})

// console.log(printAns);    

const allEvens = function(num){
  return num.every(ans => ans % 2 === 0);
}

// console.log(allEvens([2,4,8,6,10])) 

/*filter() method */
function validUser(username){
  const user = username.filter(name => name.length < 10);
  return user;
}
  
console.log(validUser(['Ejeme']));


// function validUserNames(usernames) {
//   // Filter usernames that are less than 10 characters
//   const filteredArr = usernames.filter(name => name.length < 10);
//   return filteredArr;
// }

// // Pass an array of usernames
// console.log(validUserNames(['Ejeme'])); 

// filter() return new array if it passes the test 

const luckyNum = [2,3,4,6,7,8];
const arr = luckyNum.filter(function(number){
  return number > 3;
})
console.log(arr);