Flex Box by @ejeme365 - Codewith.it

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

Referenze

idIdentifica univocamente un elemento HTML
formnovalidateImpedisce la convalida di un singolo elemento input
srcIndica la provenienza di una risorsa esterna (tramite URL).
<h3>Titolo di intestazione di terzo livello
text/plainDefinisce un metodo di non codifica dei valori di un form
<li>Inserisce voci all'interno di una lista

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Ruota delle Cucine

Pizzafy - Calcolatore di Pizza

Color Assigment

Home Page di Cristian Moraru\\

Un Giorno a Napoli: Itinerario Det

“esercitazione4.html”

infostrumenti.html

Form per il torneo misto disfo

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!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);