CSS Flexbox (Flexible Box)


Sisällysluettelo

    Näytä sisällysluettelo


1

2

3

4

5

6

7

8

Kokeile itse →

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

CSS Flexbox -asettelumoduuli

Ennen Flexbox Layout -moduulia oli neljä asettelutilaa:

Block

Block-like, verkkosivun osioihin

Inline

Inline, tekstiä varten

Table

Taulukko kaksiulotteisen taulukon tiedoille

Positioned

Positioned, elementin nimenomainen sijainti

Flexible Box Layout Module helpottaa joustavan responsiivisen asettelurakenteen suunnittelua ilman kelluntaa tai paikannusta.


Selaimen tuki

Flexbox-ominaisuuksia tuetaan kaikissa nykyaikaisissa selaimissa.

29.0 11.0 22.0 10 48

Flexbox-elementit

Jotta voit aloittaa Flexbox-mallin käytön, sinun on ensin määritettävä joustava säiliö.

1

2

3

Yllä oleva elementti edustaa joustavaa säiliötä (sinistä aluetta), jossa on kolme joustavaa kohdetta.

Esimerkki

Joustava säiliö, jossa on kolme joustavaa osaa:

<div 
  class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Kokeile itse →

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


Saat lisätietoja flex-säiliöistä ja flex-tuotteista seuraavissa luvuissa.