CSS - właściwości flex-flow


flex-flow: flex-direction

kod wynik kodu
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="pl">
<title>webatak.pl - CSS - właściwości generowanej treści</title>
<link rel="Stylesheet" type="text/css" href="style.css" />
<style type="text/css">
.flex-container {
  height: 240px;
  width: 320px;
  font-size: 30px;
  border: 2px solid black;
  display: flex;
  flex-flow: flex-direction;
}
.flex-container div {
  width: 100px;
}
.item1 {
  background: yellow;
}
.item2 {
  background: orange;
}
.item3 {
  background: red;
}
.item4 {
  background: silver;
}
 </style>
</head>
<body>

<h2>flex-flow: flex-direction</h2>
<div class="flex-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>
 </body>
</html>


flex-flow: flex-wrap

kod wynik kodu
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="pl">
<title>webatak.pl - CSS - właściwości generowanej treści</title>
<link rel="Stylesheet" type="text/css" href="style.css" />
<style type="text/css">
.flex-container {
  height: 240px;
  width: 320px;
  font-size: 30px;
  border: 2px solid black;
  display: flex;
  flex-flow: flex-wrap;
}
.flex-container div {
  width: 100px;
}
.item1 {
  background: yellow;
}
.item2 {
  background: orange;
}
.item3 {
  background: red;
}
.item4 {
  background: silver;
}
 </style>
</head>
<body>

<h2>flex-flow: flex-wrap</h2>
<div class="flex-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>
 </body>
</html>


flex-flow: row wrap

kod wynik kodu
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="pl">
<title>webatak.pl - CSS - właściwości generowanej treści</title>
<link rel="Stylesheet" type="text/css" href="style.css" />
<style type="text/css">
.flex-container {
  height: 240px;
  width: 320px;
  font-size: 30px;
  border: 2px solid black;
  display: flex;
  flex-flow: row wrap;
}
.flex-container div {
  width: 100px;
}
.item1 {
  background: yellow;
}
.item2 {
  background: orange;
}
.item3 {
  background: red;
}
.item4 {
  background: silver;
}
 </style>
</head>
<body>

<h2>flex-flow: row wrap</h2>
<div class="flex-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>
 </body>
</html>


flex-flow: row-reverse wrap

kod wynik kodu
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="pl">
<title>webatak.pl - CSS - właściwości generowanej treści</title>
<link rel="Stylesheet" type="text/css" href="style.css" />
<style type="text/css">
.flex-container {
  height: 240px;
  width: 320px;
  font-size: 30px;
  border: 2px solid black;
  display: flex;
  flex-flow: row-reverse wrap;
}
.flex-container div {
  width: 100px;
}
.item1 {
  background: yellow;
}
.item2 {
  background: orange;
}
.item3 {
  background: red;
}
.item4 {
  background: silver;
}
 </style>
</head>
<body>

<h2>flex-flow: row-reverse wrap</h2>
<div class="flex-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>
 </body>
</html>