Flex Box by @ejeme365 - Codewith.it

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

References

<canvas>Tag per disegnare grafica dinamica su pagine web.
<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
Inserisce un commento nel codice
novalidateImpedisce la convalida dei campi con valori tipizzati di elemento input
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
<tr>Definisce le righe di una tabella (rows)

Users

Log in to search for users

Explore

Find inspiration

Listino Scontistica test

La danza del Fuoco e delle Ombre

Pagina html di prova

Random Website Demo1

ciao io sono sara

venezia esercizio pretest

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