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>Flexible Boxes</h1>
<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>
<p>Try to resize the browser window.</p>
<p>A container with "flex-wrap: nowrap;" will never wrap its items.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>
</body>
</html>
Innan Flexbox Layout-modulen fanns det fyra layoutlägen:
Blockliknande, för avsnitt på en webbsida
Inline, för text
Tabell, för tvådimensionell tabelldata
Positionerad, för explicit position av ett element
Flexible Box Layout Module, gör det lättare att designa flexibel responsiv layoutstruktur utan att använda flytande eller positionering.
Flexbox-egenskaperna stöds i alla moderna webbläsare.
29.0 | 11.0 | 22.0 | 10 | 48 |
För att börja använda Flexbox-modellen måste du först definiera en flexbehållare.
Elementet ovan representerar en flexbehållare (det blå området) med tre flexartiklar.
En flexbehållare med tre flexartiklar:
<div
class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
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>
Du kommer att lära dig mer om flexbehållare och flexartiklar i nästa kapitel.