Advanced CSS
CSS Flex Box

20min
CSS Flexbox Layout Module

Basic concepts of flexbox
The Flexible Box Module , inta badan waxaa loo tixraacaa inuu yahay flexbox , waxaana loo design- gareeyay in lagu isticmaalo one-dimensional layout model , sido kale method ahan waxay siinaysaaa space u dhexeeya items-ka interface iyo sidoo kale in lahelo alignment powerfull ah . 

Inta aan la helin Flexbox Layout module , waxaa jiray afar way oo loo sameeyo layouts-ka :
Block, for sections in a webpage
Inline, for text
Table, for two-dimensional table data
Positioned, for explicit position of an element
Flexible Box Layout Module, waxay ka dhigaysaa mid fudu in la sameeyo design flexible ah sidoo kalena aad ka dhigi karto responsive ayadoon la'isticmalyanin float ama positioning .
Flexbox Elements

Si aad u bilowdo in aad isticmaasho flexbox model waxaa u baahantahay in aad haysato flex container .
css flex box somali
﻿
Elements-kaan kore waxay ka tarjumayaan flex container (area-da buluuga ah) waxaan la socodo 3 item flex items ah.

Tusaale
HTML
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
﻿
Parent Element (Container)

Flex container-ka wuxuu flixible noqonayaa adiga oo display ka dhigaya flex .
CSS
.flex-container {
  display: flex;
}
.flex-container {
  display: flex;
}
﻿
Flex Container properties-kiisa waa :
﻿
﻿flex-direction﻿
﻿flex-wrap﻿
﻿flex-flow﻿
﻿justify-content﻿
﻿align-items﻿
﻿align-content﻿
The flex-direction Property
flex-direction property wuxuu qeexayaa dhinicee ayad rabtaa in flex items-ka ay u jiheystaan.

flex direction column
﻿
CSS
.flex-container {
  display: flex;
  flex-direction: column;
}
.flex-container {
  display: flex;
  flex-direction: column;
}
﻿
﻿
column-reverse value flex items-ka wuu is daba dhigayaa vertically lakin wa (botom to top).

CSS
.flex-container {
  display: flex;
  flex-direction: column-reverse;
}
.flex-container {
  display: flex;
  flex-direction: column-reverse;
}
﻿
row  value wuu is daba dhigayaa flex items-ka si horizontally ah (from left to right).
CSS
.flex-container {
  display: flex;
  flex-direction: row;
}
.flex-container {
  display: flex;
  flex-direction: row;
}
﻿
row-reverse value flex items-ka ayuu is daba dhigayaa qaab horizontally ah lakin (from right to left).
CSS
.flex-container {
  display: flex;
  flex-direction: row-reverse;
}
.flex-container {
  display: flex;
  flex-direction: row-reverse;
}
﻿
wrap value  wuxuu qeexayaa in flex items-ka la wrap gareeyo hadii loo baahdo.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: wrap;
  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>The flex-wrap Property</h1>

<p>The "flex-wrap: wrap;" specifies that the flex items will wrap if necessary:</p>

<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>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

<p>Try resizing the browser window.</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: wrap;
  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>The flex-wrap Property</h1>

<p>The "flex-wrap: wrap;" specifies that the flex items will wrap if necessary:</p>

<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>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

<p>Try resizing the browser window.</p>

</body>
</html>
﻿
nowrap value wuxuu qeexayaa in flex items-ka aanan wrap garoowaynin (wana sida default-ga ah).
CSS
.flex-container {
  display: flex;
  flex-wrap: nowrap;
}
.flex-container {
  display: flex;
  flex-wrap: nowrap;
}
﻿
wrap-reverse  value wuxuu qeexayaa in flexible items-ka la wrap gareyn doono hadii loo baahdo waliba qaab caksi ah .
CSS
.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}
.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}
﻿
The flex-flow Property

The flex-flow Property waa wado gaaban oo aad ku qeexi karto flex-direction and flex-wrap properties.
CSS
.flex-container {
  display: flex;
  flex-flow: row wrap;
}
.flex-container {
  display: flex;
  flex-flow: row wrap;
}
﻿
The justify-content Property

justify-content property waxaa loo isticmaala in lagu align gareeyo flex items-ka.
css justify proerty somali
﻿
center value wuxuu flex items-ka ku align gareeyaa in uu geeyo dhex bartamaha container-ka.
CSS
.flex-container {
  display: flex;
  justify-content: center;
}
.flex-container {
  display: flex;
  justify-content: center;
}
﻿
flex-start value wuxuu flex items-ka ku align gareeya bilowga container-ka (kan ayaan default ah).
CSS
.flex-container {
  display: flex;
  justify-content: flex-start;
}


.flex-container {
  display: flex;
  justify-content: flex-start;
}

﻿
flex-end value wuxuu flex items-ka ku align gareeyaa at dhammaadka container-ka.
CSS
.flex-container {
  display: flex;
  justify-content: flex-end;
}
.flex-container {
  display: flex;
  justify-content: flex-end;
}
﻿
space-around value flex items-ka aya wuxuu u soo bandhigaa space ka horeeya items-ka , mid dhexdooda ah iyo mid items-ka kadib ah.
CSS
.flex-container {
  display: flex;
  justify-content: space-around;
}
.flex-container {
  display: flex;
  justify-content: space-around;
}
﻿
space-between value wuxuu flex items-ka usoo bandhigaa space u dhexeeya items-ka.
CSS
.flex-container {
  display: flex;
  justify-content: space-between;
}
.flex-container {
  display: flex;
  justify-content: space-between;
}
﻿
The align-items Property
align-items property waxaa loo isticmaalaa in lagu align gareeyo flex items-ka.
align-items somali
﻿
Tusaaloyinkan soo socda waxaan isticmaali doona 200px height container si aan si fiican ugu fahano align-items property.
CSS
.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}
.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}
﻿
flex-start  value wuxuu flex items-ka wuxuu dhigayaa qaybta sare ee container-ka.
CSS
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}
﻿

flex-end value wuxu dhigayaa flex items qaybta hoose flex conatiner-ka.
CSS
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}
﻿
stretch value wuxuu flex items ku balaarinayaa container-ka si ay u buuxiyaan space-ka banaan. (kan ayan default ah) .
CSS
.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}
.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}
﻿
Perfect Centering
Example-kan waxaan ku xalinaynaa cilad style oo aad caan u ah taasi oo ah in si perfect ah aan u center-gareyno div.
div center somali
﻿
Solution: si aad si sax ah u center-gareyso div ama flex container isticmaal justify-content and align-items properties to center, kadib si perfect ah ayuu container items u tagayan center-ka.
﻿
CSS
.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}
.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}
﻿
Simple Project for CSS Flex Box
flex box example somali
﻿
HTML
CSS
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Box</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
        <!-- flex basics -->
        <nav>
            <h1>MyLogo</h1>
            <ul>
              <li><a href="">Home</a></li>
              <li><a href="">About</a></li>
              <li><a href="">Contact</a></li>
              <li><a href="">Service</a></li>
              <li><a href="">SignUp</a></li>
            </ul>
        </nav>
<!-- align things horizontaly and verticaly -->
        <section class="center">
            <h1>Making Css Another Level</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, praesentium.</p>
            <button>Learn More</button>
        </section>

        <section>
            <div class="boxes">
                <div class="box">
                    <h1>Box 1</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro laboriosam quasi adipisci corrupti optio distinctio placeat quod, quo libero praesentium.</p>
                    <button>Box 1</button>
                </div>
                <div class="box">
                    <h1>Box 1</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro laboriosam quasi adipisci corrupti optio distinctio placeat quod, quo libero praesentium.</p>
                    <button>Box 1</button>
                </div>
                <div class="box">
                    <h1>Box 1</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro laboriosam quasi adipisci corrupti optio distinctio placeat quod, quo libero praesentium.</p>
                    <button>Box 1</button>
                </div>
            </div>
        </section>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Box</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
        <!-- flex basics -->
        <nav>
            <h1>MyLogo</h1>
            <ul>
              <li><a href="">Home</a></li>
              <li><a href="">About</a></li>
              <li><a href="">Contact</a></li>
              <li><a href="">Service</a></li>
              <li><a href="">SignUp</a></li>
            </ul>
        </nav>
<!-- align things horizontaly and verticaly -->
        <section class="center">
            <h1>Making Css Another Level</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, praesentium.</p>
            <button>Learn More</button>
        </section>

        <section>
            <div class="boxes">
                <div class="box">
                    <h1>Box 1</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro laboriosam quasi adipisci corrupti optio distinctio placeat quod, quo libero praesentium.</p>
                    <button>Box 1</button>
                </div>
                <div class="box">
                    <h1>Box 1</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro laboriosam quasi adipisci corrupti optio distinctio placeat quod, quo libero praesentium.</p>
                    <button>Box 1</button>
                </div>
                <div class="box">
                    <h1>Box 1</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro laboriosam quasi adipisci corrupti optio distinctio placeat quod, quo libero praesentium.</p>
                    <button>Box 1</button>
                </div>
            </div>
        </section>

</body>
</html>
﻿
Example 2
HTML
CSS
/* universal selector */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

nav {
	display: flex;
	justify-content: space-around;
	margin: 10px;
}

nav ul {
	display: flex;
	/* justify-content: right; */
	/* flex-direction: row; */
}

nav ul li {
	list-style: none;
}

nav ul li a {
	text-decoration: none;
	margin: 10px;
}

/* vh = viewport height
   vw = viewport width
*/

header {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 90vh;
}

header > * {
	margin: 5px;
}

button {
	padding: 10px;
	width: 100px;
	border: 0;
	border-radius: 25px;
	background-color: aquamarine;
}

.sections {
	display: flex;
}

.flex-item {
	padding: 10px;
	border: solid 1px rgb(139, 133, 133);
	border-radius: 10px;
	margin: 10px;
}

.item1 {
	flex: 2;
}
.item2 {
	flex: 1;
}
.item3 {
	flex: 1;
}

/* universal selector */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

nav {
	display: flex;
	justify-content: space-around;
	margin: 10px;
}

nav ul {
	display: flex;
	/* justify-content: right; */
	/* flex-direction: row; */
}

nav ul li {
	list-style: none;
}

nav ul li a {
	text-decoration: none;
	margin: 10px;
}

/* vh = viewport height
   vw = viewport width
*/

header {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 90vh;
}

header > * {
	margin: 5px;
}

button {
	padding: 10px;
	width: 100px;
	border: 0;
	border-radius: 25px;
	background-color: aquamarine;
}

.sections {
	display: flex;
}

.flex-item {
	padding: 10px;
	border: solid 1px rgb(139, 133, 133);
	border-radius: 10px;
	margin: 10px;
}

.item1 {
	flex: 2;
}
.item2 {
	flex: 1;
}
.item3 {
	flex: 1;
}
﻿
Advanced CSS
Responsive Web esign