Som vi angav i föregående kapitel är detta en flex behållare (det blå området) med tre flex artiklar:
Flexbehållaren blir flexibel genom att ställa in egenskapen display
till flex
:
.flex-container {
display: flex;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Create a Flex Container</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>
<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>
</body>
</html>
Flexbehållarens egenskaper är:
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
Egenskapen flex-direction
definierar i vilken riktning behållaren vill stapla flexobjekten.
Värdet kolumn
staplar flexobjekten vertikalt (uppifrån och ned):
.flex-container {
display: flex;
flex-direction: column;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-direction: column;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-direction Property</h1>
<p>The "flex-direction: column;" stacks the flex items vertically (from top to bottom):</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Värdet column-reverse
staplar flexobjekten vertikalt (men från botten till toppen):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-direction: column-reverse;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-direction Property</h1>
<p>The "flex-direction: column-reverse;" stacks the flex items vertically (but from bottom to top):</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Värdet rad
staplar flexobjekten horisontellt (från vänster till höger):
.flex-container {
display: flex;
flex-direction: row;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-direction: row;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-direction Property</h1>
<p>The "flex-direction: row;" stacks the flex items horizontally (from left to right):</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Värdet row-reverse
staplar flexobjekten horisontellt (men från höger till vänster):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-direction: row-reverse;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-direction Property</h1>
<p>The "flex-direction: row-reverse;" stacks the flex items horizontally (but from right to left):</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Egenskapen flex-wrap
anger om flexobjekten ska lindas eller inte.
Exemplen nedan har 12 flexobjekt, för att bättre demonstrera flex-wrap
-egenskap.
Värdet wrap
anger att flexartiklarna kommer att lindas om det behövs:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-wrap Property</h1>
<p>The "flex-wrap: wrap;" specifies that the flex items will wrap if necessary:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
<p>Try resizing the browser window.</p>
</body>
</html>
Värdet nowrap
anger att flexobjekten inte kommer att lindas in (detta är standard):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: DodgerBlue;
}
.flex-container>div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-wrap Property</h1>
<p>The "flex-wrap: nowrap;" specifies that the flex items will not wrap (this is default):</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
<p>Try resizing the browser window.</p>
</body>
</html>
Värdet wrap-reverse
anger att de flexibla föremålen kommer att slås in vid behov, i omvänd ordning:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-wrap Property</h1>
<p>The "flex-wrap: wrap-reverse;" specifies that the flex items will wrap if necessary, in reverse order:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
<p>Try resizing the browser window.</p>
</body>
</html>
Egenskapen flex-flow
är en förkortningsegenskap för att ställa in både flex-direction
och flex-wrap
egenskaper.
.flex-container {
display: flex;
flex-flow: row wrap;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-flow: row wrap;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-flow Property</h1>
<p>The flex-flow property is a shorthand property for the flex-direction and the flex-wrap properties.</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
<p>Try resizing the browser window.</p>
</body>
</html>
Egenskapen justify-content
används för att justera flexobjekten:
Värdet center
justerar flexobjekten i mitten av behållaren:
.flex-container {
display: flex;
justify-content: center;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
justify-content: center;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The justify-content Property</h1>
<p>The "justify-content: center;" aligns the flex items at the center of the container:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Värdet flex-start
justerar flexartiklarna i början av behållaren (detta är standard):
.flex-container {
display: flex;
justify-content: flex-start;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
justify-content: flex-start;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The justify-content Property</h1>
<p>The "justify-content: flex-start;" aligns the flex items at the beginning of the container (this is default):</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Värdet flex-end
justerar flexartiklarna i slutet av behållaren:
.flex-container {
display: flex;
justify-content: flex-end;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
justify-content: flex-end;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The justify-content Property</h1>
<p>The "justify-content: flex-end;" aligns the flex items at the end of the container:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Värdet space-around
visar flexobjekten med mellanslag före, mellan, och efter raderna:
.flex-container {
display: flex;
justify-content: space-around;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
justify-content: space-around;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The justify-content Property</h1>
<p>The "justify-content: space-around;" displays the flex items with space before, between, and after the lines:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Värdet mellanslag
visar flexobjekten med mellanslag mellan rader:
.flex-container {
display: flex;
justify-content: space-between;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
justify-content: space-between;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The justify-content Property</h1>
<p>The "justify-content: space-between;" displays the flex items with space between the lines:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Egenskapen align-items
används för att justera flexobjekten.
I dessa exempel använder vi en behållare med 200 pixlar hög för att bättre demonstrera egenskapen align-items
.
Värdet center
justerar flexobjekten i mitten av behållare:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
height: 200px;
align-items: center;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-items Property</h1>
<p>The "align-items: center;" aligns the flex items in the middle of the container:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Värdet flex-start
justerar flexartiklarna överst i behållaren:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-items Property</h1>
<p>The "align-items: flex-start;" aligns the flex items at the top of the container:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Värdet flex-end
justerar flexartiklarna längst ned i behållaren:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-items Property</h1>
<p>The "align-items: flex-end;" aligns the flex items at the bottom of the container:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Värdet stretch
sträcker ut flexartiklarna för att fylla behållaren (detta är standard):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-items Property</h1>
<p>The "align-items: stretch;" stretches the flex items to fill the container (this is default):</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Värdet baseline
justerar de flexibla objekten som deras baslinjer justerar:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
Obs! exemplet använder olika teckenstorlekar för att visa att objekten justeras efter textens baslinje:
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-items Property</h1>
<p>The "align-items: baseline;" aligns the flex items such as their baselines aligns:</p>
<div class="flex-container">
<div><h1>1</h1></div>
<div><h6>2</h6></div>
<div><h3>3</h3></div>
<div><small>4</div>
</div>
</body>
</html>
Egenskapen align-content
används för att justera flexlinjerna.
I dessa exempel använder vi en behållare med 600 pixlar hög, med flex-wrap
-egenskapen inställd på wrap
för att bättre demonstrera egenskapen align-content
.
Värdet mellanslag
visar flexlinjerna med lika stort mellanrum:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
overflow: scroll;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>
<p>The "align-content: space-between;" displays the flex lines with equal space between them:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>
Värdet space-around
visar flexlinjerna med mellanslag före, mellan och efter dem:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
overflow: scroll;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>
<p>The "align-content: space-around;" displays the flex lines with space before, between, and after them:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>
Värdet stretch
sträcker ut flexlinjerna för att ta upp de återstående mellanslag (detta är standard):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
overflow: scroll;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>
<p>The "align-content: stretch;" stretches the flex lines to take up the remaining space (this is default):</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>
Värdet center
visar flexlinjerna i mitten av behållaren:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
overflow: scroll;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>
<p>The "align-content: center;" displays the flex lines in the middle of the container:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>
Värdet flex-start
visar flexlinjerna i början av behållaren:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
overflow: scroll;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>
<p>The "align-content: flex-start;" displays the flex lines at the start of the container:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>
Värdet flex-end
visar flexlinjerna i slutet av behållaren:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
overflow: scroll;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>
<p>The "align-content: flex-end;" displays the flex lines at the end of the container:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>
I följande exempel kommer vi att lösa ett mycket vanligt stilproblem: perfekt centrering.
LÖSNING: Ställ in egenskaperna för både justify-content
och align-items
till center
, och flexobjektet kommer att vara perfekt centrerat:
.flex-container {
display: flex;
height: 300px;
justify-content:
center;
align-items: center;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
color: white;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<h1>Perfect Centering</h1>
<p>A flex container with both the justify-content and the align-items properties set to <em>center</em> will align the item(s) in the center (in both axis).</p>
<div class="flex-container">
<div></div>
</div>
</body>
</html>
Följande tabell listar alla egenskaper för CSS Flexbox Container:
Ändrar beteendet för flex-wrap-egenskapen. Det liknar align-objekt, men istället för att justera flex-objekt, justerar det flexlinjer
Justerar de flexibla objekten vertikalt när objekten inte använder allt tillgängligt utrymme på tväraxeln
Anger typen av ruta som används för ett HTML-element
Anger riktningen för de flexibla föremålen inuti en flexbehållare
En stenografisk egenskap för flex-direction och flex-wrap
Anger om flexartiklarna ska lindas eller inte, om det inte finns tillräckligt med plats för dem på en flexlinje
Justerar de flexibla objekten horisontellt när objekten inte använder allt tillgängligt utrymme på huvudaxeln