www.ruanyifeng.com/blog/2015/0…

First, the layout of dice

On one side of the die, up to 9 dots can be placed.

Let’s take a look at how Flex implements a 1-point to 9-point layout.

Unless otherwise specified, the HTML template for this section is as follows.

<div class="box">
	<span class="item"></span>
</div>
Copy the code

In the code above, the div element (representing a face of the die) is the Flex container, and the SPAN element (representing a point) is the Flex item. If you have multiple projects, add multiple SPAN elements, and so on.

1.1 single project

First of all, I only have one point in the upper left corner. Flex layout defaults to left-aligned first line, so one line of code is sufficient.

.box {
	display:flex
}
Copy the code

By setting the alignment of items, you can achieve center and right alignment.

.box {
	display: flex
	justify-content: center
}
Copy the code

.box {
	display: flex
	justify-content: flex-end
}
Copy the code

Set the cross axis alignment to move the spindle vertically.

. Box {display: flex align-items:center}Copy the code

.box {
	display: flex justify-content:center align-items:center /* Defines how items are aligned on the cross axis */}Copy the code

.box {
	display: flex context-content :center align-items: flex-end /* Defines how items are aligned on the cross axis */}Copy the code

.box {
	display:flex context-content :flex-end align-items: flex-end /* Defines how items are aligned on the cross axis */}Copy the code

1.2 double project

.box {
	display: flex
	justify-content: space-between
}
Copy the code

.box {
	display: flex flex-direction: column /* column from top to bottom */ justify-content: space between}Copy the code

.box {
	display: flex flex-direction: column justify-content: space-between align-items: center /* Axis from top to bottom cross axis from left to right center display */}Copy the code

.box {
	display: flex flex-direction: column justify-content: space-between align-items: Flex-end /* Cross the axis from left to right */Copy the code

.box {
	display: flex
}
.item:nth-child(2) {
	align-self: center /* Sets the alignment of individual items */}Copy the code

.box {
	display: flex
	justify-content:space-between
}
.item:nth-child(2) {
	align-self: flex-end /* Sets the alignment of individual items */}Copy the code

1.3 three projects

.box {
	display: flex
}
.item:nth-child(2) {align-self: center
}
.item:nth-child(3) {align-self: flex-end
}
Copy the code

1.4 the four projects

.box {
	display: flex
	flex-wrap: wrap
	justify-content: flex-end
	align-content: space-between
}
Copy the code

The HTML code is as follows

<div class="box">
	<div class="column">
    <span class="item"></span>
    <span class="item"></span>
   </div>
   	<div class="column">
      <span class="item"></span>
      <span class="item"></span>
   </div>
</div>
Copy the code

The CSS code is as follows

.box {
  display: flex;
  flex-wrap: wrap;
  align-items: space-between;
}
.column {
  display:flex;
 	justify-content: space-between
}
Copy the code

1.5 six projects

.box {
	display: flex
	flex-wrap: wrap
	align-content: space-between
}
Copy the code

.box {
	display: flex
	flex-direction: column
  flex-wrap: wrap
	align-content: space-between
}
Copy the code

The HTML code is as follows

<div class="box">
	<div class="row">
		<span class="item"></span>
		<span class="item"></span>
		<span class="item"></span>
	</div>
	<div class="row">
		<span class="item"></span>
	</div>
	<div class="row">
		<span class="item"></span>
		<span class="item"></span>
	</div>
</div>
Copy the code

The CSS code is as follows

.box {
	display:flex;
  flex-wrap: wrap;
}
.row {
  flex-basis: 100%/* Each line is the width of the entire project100% */ 
  display:flex;
}
.row:nth-child(2) {justify-content: center;
}
.row:nth-child(3) {justify-content: space-between;
}
Copy the code

1.6 the nine project

.box {
	display: flex;
	flex-wrap: wrap;
}
Copy the code

Second, grid layout

2.1 Basic grid layout

The simplest grid layout is evenly distributed. Divide the space evenly within the container, much like the dice layout above, but set the project to automatically scale.

The HTML code is as follows

<div class="box">
    <div class="item">1</div>
    <div class="item">1</div>
    <div class="item">1</div>
</div>
Copy the code

The CSS code is as follows

.box {
	display: flex;
}
.item {
	flex: 1/* Divide each portion equally1/3 */
}
Copy the code

2.2 Percentage Layout

The width of one grid is a fixed percentage of the rest of the grid evenly allocated to the remaining space

1. The HTML code is as follows

<div class="box">
  <div class="item">
    1
  </div>
   <div class="item">
    2
  </div>
   <div class="item">
    3
  </div>
</div>
Copy the code

The CSS code is as follows

.box {
  display: flex;
}
.item:nth-child(1) {
  flex: 0 1 50%;
}
Copy the code

2. The HTML code is as follows

<div class="box">
  <div class="item">
    1
  </div>
   <div class="item">
    2
  </div>
</div>
Copy the code

The CSS code is as follows

.box {
  display: flex;
}
.item:nth-child(2) {
  flex: 0 1 33.33%;
}
Copy the code

3. The HTML code is as follows

<div class="box">
  <div class="item">
    1
  </div>
   <div class="item">
    2
  </div>
  <div class="item">
    3
  </div>
</div>
Copy the code

The CSS code is as follows

.box {
  display: flex;
}
.item:nth-child(1) {
  flex: 0 1 25%;
}
.item:nth-child(3) {
  flex: 0 1 33.33%;
}
Copy the code

The Layout of the Grail

Holy Grail Layout is the most common type of website Layout. From top to bottom, the page is divided into three sections: header, body, and footer. The torso is horizontally divided into three columns, from left to right: navigation, main column, secondary column.

The HTML layout is as follows

<div class="box">
  <header>header</header>
  <div class="body">
    <main class="content">content</main>
    <nav class="nav">navigation</nav>
    <aside class="aside">The side content</aside>
  </div>
  <footer>footer</footer>
</div>
Copy the code

The CSS code is as follows

.box {
  display: flex;
  min-height:100vh;
  flex-direction:column;
}
header.footer{
  flex: 1;
}
.body {
  display: flex;
  flex: 1;
}
.content {
  flex: 1; /* The intermediate content is adaptive */
}
.nav..aside {
  flex: 0 0 12em; /* Set the width of the left and right ends */
}
.nav {
  order: -1; /* Place the navigation bar on the far left */
}
Copy the code

If the screen is small, the three columns of the torso automatically become vertical overlay.

@media (max-width:768px) {.body {
    flex-direction: column;
    flex:1
	}
  .nav..content..aside {
    flex: auto; }}Copy the code

Four, the layout of the input box

We often need to add a prompt in front of the input field and a button in the back.

The HTML code is as follows

<div class="InputAddOn">
	<span class="InputAddOn-item">1</span>
	<input class="InputAddOn-field">
	<button class="InputAddOn-item">2</button>
</div>
Copy the code

The CSS code is as follows

.InputAddOn{
  display: flex;
}
.InputAddOn-field {
  flex: 1;
}
Copy the code

Five, hanging layout

Sometimes, to the left or right of the main column, you need to add a picture bar.

The HTML code is as follows

<div class="Media">
  <img src="" class="Media-figure" alt="" />
  <p class="Media-body">123</p>
</div>
Copy the code

The CSS code is as follows

.Media {
	display: flex;
  align-items: flex-start;
}
.Media-figure {
  margin-right:1em;
}
.Media-body {
  flex: 1;
}
Copy the code

Six, fixed bottom column

Sometimes, with too little content to fill a screen, the bottom column is pushed up to the center of the page. You can use the Flex layout so that the bottom column always appears at the bottom of the page.

The HTML code is as follows

<body class="Site"> <header>... </header> <main class="Site-content">... </main> <footer>... </footer> </body>Copy the code

The CSS code is as follows

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}
Copy the code

Seventh, flow layout

The number of items per row is fixed, and the line will automatically branch.

The CSS code is as follows

.parent {
  width: 200px;
  height: 150px;
  background-color: black;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.child {
  box-sizing: border-box;
  background-color: white;
  flex: 0 0 25%;
  height: 50px;
  border: 1px solid red;
}
Copy the code