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


flex-direction: row

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-direction: row;
}
.flex-container div {
  flex: 1;
}
.item1 {
  background: yellow;
}
.item2 {
  background: orange;
}
.item3 {
  background: red;
}
 </style>
</head>
<body>

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


flex-direction: row-reverse

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-direction: row-reverse;
}
.flex-container div {
  flex: 1;
}
.item1 {
  background: yellow;
}
.item2 {
  background: orange;
}
.item3 {
  background: red;
}
 </style>
</head>
<body>

<h2>flex-direction: row-reverse</h2>
<div class="flex-container">
  <div class="item1 aligned">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
</div>
 </body>
</html>


flex-direction: column

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-direction: column;
}
.flex-container div {
  flex: 1;
}
.item1 {
  background: yellow;
}
.item2 {
  background: orange;
}
.item3 {
  background: red;
}
 </style>
</head>
<body>

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


flex-direction: column-reverse

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-direction: column-reverse;
}
.flex-container div {
  flex: 1;
}
.item1 {
  background: yellow;
}
.item2 {
  background: orange;
}
.item3 {
  background: red;
}
 </style>
</head>
<body>

<h2>flex-direction: column-reverse</h2>
<div class="flex-container">
  <div class="item1 aligned">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
</div>
 </body>
</html>