CSS - właściwości align-items


align-items: baseline

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;
  align-items: baseline;
}
.flex-container div {
  height: 120px;
  width: 100px;
  flex: 1;
}
.item1 {
  background: yellow;
}
.item2 {
  background: orange;
}
.item3 {
  background: red;
}
 </style>
</head>
<body>

<h2>align-content: baseline</h2>
<div class="flex-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
</div>
</body>
</html>


align-items: center

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>programowanie - 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;
  align-items: center;
}
.flex-container div {
  height: 120px;
  width: 100px;
  flex: 1;
}
.item1 {
  background: yellow;
}
.item2 {
  background: orange;
}
.item3 {
  background: red;
}
 </style>
</head>
<body>

<h2>align-content: center</h2>
<div class="flex-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
</div>
</body>
</html>


align-items: flex-start

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>programowanie - 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;
  align-items: flex-start;
}
.flex-container div {
  height: 120px;
  width: 100px;
  flex: 1;
}
.item1 {
  background: yellow;
}
.item2 {
  background: orange;
}
.item3 {
  background: red;
}
 </style>
</head>
<body>

<h2>align-content: flex-start</h2>
<div class="flex-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
</div>
</body>
</html>


align-items: flex-end

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>programowanie - 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;
  align-items: flex-end;
}
.flex-container div {
  height: 120px;
  width: 100px;
  flex: 1;
}
.item1 {
  background: yellow;
}
.item2 {
  background: orange;
}
.item3 {
  background: red;
}
 </style>
</head>
<body>

<h2>align-content: flex-end</h2>
<div class="flex-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
</div>
</body>
</html>


align-items: stretch

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>programowanie - 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;
  align-items: stretch;
}
.flex-container div {
  height: 120px;
  width: 100px;
  flex: 1;
}
.item1 {
  background: yellow;
}
.item2 {
  background: orange;
}
.item3 {
  background: red;
}
 </style>
</head>
<body>

<h2>align-content: stretch</h2>
<div class="flex-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
</div>
</body>
</html>