当前位置：网站首页>Flex layout

Flex layout

2022-04-23 20:31:00 【Different 213】

List of articles

flex Layout

flex Layout

1.flex Layout principle

flex The layout is flexible Box Abbreviation , Meaning for ：” Elastic layout “, To provide maximum flexibility for box models , Any container can be specified as flex Layout .

When we set the box to flex After the layout , The child element float、 clear and vertical-align Property will fail .
Telescoping layout = Elastic layout = Expansion box layout = Elastic box layout = flex Layout .

use flex Elements of layout , be called flex Containers （flex container）, abbreviation “ Containers ” . All its child elements automatically become container members , be called flex project （flex item）, abbreviation “ project ”.

summary ：

By adding... To the parent box flex attribute , To control the position and arrangement of the boxes .

2. Common parent properties

flex-direction	Set the direction of the spindle （ The default is x Axis ）
justify-content	Set the arrangement of sub elements on the spindle
flex-warp	Set whether the child element should wrap
align-content	Set the arrangement of child elements on the side axis （ Multiple lines ）
align-items	Set the arrangement of child elements on the side axis （ A single ）
flex-flow	Compound attribute , It's equivalent to setting flex-direction and flex-warp

（1）flex-direction Set the direction of the spindle

Be careful ： take X Axis or Y The axis is set to the rear of the spindle , The other axis will default to the side axis .

Property value ：

row	The default value is From left to right
row-reverse	From right to left
column	From top to bottom
column-reverse	From bottom to top

<!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_direction</title>
  <style> .container {
      display: flex; width: 600px; height: 400px; background-color: pink; justify-content: center; /* flex-direction Set the direction of the spindle   The default is x Axis  * row ： The default value is  X Axis  * row-reverse:  From right to left  * column： From top to bottom  （Y Axis ） * column-reverse： From bottom to top  */ flex-direction: column; } .container span {
      width: 150px; height: 150px; background-color: purple; margin: 10px; } </style>
</head>

<body>
  <div class="container">
    <span>1</span><span>2</span><span>3</span>
  </div>
</body>

</html>

This example shows setting the main axis of the container to Y Axis . The effect is shown below ：

（2）justify-content attribute —— Set the arrangement of sub elements on the spindle

Property value ：

flex-start	The default value is From the head If the spindle is X Axis , From left to right
flex-end	From the tail
center	Align in the center of the spindle （ If the spindle is X The axis is centered horizontally ）
space-around	Divide the remaining space equally
space-between	We'll stick the edges on both sides first , Divide the rest of the space equally （ a key ）

<!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>justify-content attribute </title>
  <style> .container {
      display: flex; width: 600px; height: 400px; background-color: pink; /* justify-content  Set the arrangement of sub elements on the spindle  * flex-start： The default value is   From the head  * flex-end： Start with the tail  * center： Align in the center of the spindle （ If the spindle is X The axis is centered horizontally ） * space-around： Divide the remaining space equally  * space-between： We'll stick the edges on both sides first , Divide the rest of the space equally  */ justify-content: space-between; } .container span {
      width: 150px; height: 150px; background-color: purple; } </style>
</head>

<body>
  <div class="container">
    <span>1</span><span>2</span><span>3</span>
  </div>
</body>

</html>

The above code example shows ：space-between Effect of attribute value , As shown in the figure below ：

（3）flex-wrap —— Set whether the child element should wrap

Property value ：

nowrap	The default value is Don't wrap
wrap	Line break

As shown in the following example code ：

<title>flex-warp attribute </title>
  <style> .container {
      display: flex; width: 600px; height: 400px; background-color: pink; /* flex-wrap  Set whether the child element should wrap  * nowrap： The default value is   Don't wrap  * wrap： Line break  */ flex-wrap: wrap; } .container span {
      width: 150px; height: 150px; background-color: purple; margin: 5px; } </style>
</head>

<body>
  <div class="container">
    <span>1</span><span>2</span><span>3</span>
    <span>4</span><span>5</span><span>6</span>
  </div>
</body>

As shown in the figure below ： The first one is the line feed effect , The second is the effect of no line break .

（4）align-items Set the arrangement of child elements on the side axis （ A single ）

Property value ：

flex-start	The default value is From top to bottom
flex-end	From bottom to top
center	Huddled together in the middle （ Vertical center ）
stretch	The tensile

<title>align-items attribute </title>
  <style> .container {
      display: flex; width: 600px; height: 400px; background-color: pink; /* align-items  Set the arrangement of sub elements on the side axis （ Single line content ） * flex-start： The default value is   From top to bottom  * flex-end： From bottom to top  * center： Huddled together in the middle （ Vertical center ） * stretch： The tensile  */ align-items: center; } .container span {
      width: 150px; height: 150px; background-color: purple; margin: 5px; } </style>
</head>

<body>
  <div class="container">
    <span>1</span><span>2</span><span>3</span>
  </div>
</body>

As shown in the figure below align-items by center The effect of the .

（5）align-content —— Set the arrangement of child elements on the side axis （ Multiple lines ）

Property value ：

flex-start	The default value is Start at the head of the side axis
flex-end	Start at the end of the side axis
center	Show... In the middle of the side axis
space-around	Children divide the remaining space equally on the side axis
space-between	The subitems are first distributed at both ends on the side axis , In bisecting the remaining space
stretch	Sets the height of the child element and bisects the height of the parent element

Be careful ： This property only takes effect in the case of multiple lines , Or just add flex-wrap The attribute is wrap Value in the case of .

The sample code is as follows ：

<!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>align-content attribute </title>
  <style> .container {
      display: flex; width: 600px; height: 400px; background-color: pink; /* align-content  Set the arrangement of sub elements on the side axis （ Multiple lines ） * flex-start： The default value is   Start at the head of the side axis  * flex-end： Start at the end of the side axis  * center： Show... In the middle of the side axis  * space-around： Children divide the remaining space equally on the side axis  * space-between： The subitems are first distributed at both ends on the side axis , Divide the rest of the space equally  * stretch： Sets the height of the child element and bisects the height of the parent element  */ flex-wrap: wrap; align-content: space-around } .container span {
      width: 150px; height: 150px; background-color: purple; } </style>
</head>

<body>
  <div class="container">
    <span>1</span><span>2</span><span>3</span>
    <span>4</span><span>5</span><span>6</span>
  </div>
</body>

</html>

As shown in the figure below align-content The property value is ：space-around The effect of the ：

（6）flex-flow attribute

flex-flow The attribute is flex-direction and flex-wrap The composite attribute of the zodiac .

The sample code is as follows ：

<!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-flow attribute </title>
  <style> .container {
      display: flex; width: 600px; height: 400px; background-color: pink; /* flex-flow attribute   Equate to   Use at the same time  flex-direction Properties and  flex-wrap attribute  */ flex-flow: wrap column; } .container span {
      width: 150px; height: 150px; background-color: purple; margin: 5px; } </style>
</head>

<body>
  <div class="container">
    <span>1</span><span>2</span><span>3</span>
    <span>4</span><span>5</span><span>6</span>
  </div>
</body>

</html>

The effect is shown below ：

3. Common child properties

flex Number of copies of sub items
align-self Controls how the subitems are arranged on the side
order Property defines the order in which children are arranged （ The order before and after ）

（1）flex Number of copies of sub items

flex Property defines the remaining space allocated by the subproject , use flex To show how many copies .

The sample code is as follows ：

<!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>lex children flex Additional copies </title>
  <style> .container {
      display: flex; width: 600px; height: 150px; margin: 0 auto; background-color: pink; } /*  Divide the width of the parent element into 6 Share   first div Occupy 3 Share , The second one is 1 Share , The third account 2 Share  */ .container div:nth-child(1) {
      height: 150px; width: 100px; background-color: purple; flex: 3; } .container div:nth-child(2) {
      background-color: orange; flex: 1; } .container div:nth-child(3) {
      height: 150px; width: 100px; background-color: greenyellow; flex: 2; } </style>
</head>

<body>
  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

</html>

The effect is shown below ：

（2）algin-self attribute Controls how the subitems themselves are arranged on the side axis

align-self Property allows a single item to have a different alignment than other items , covering align-items attribute 、 The default is auto, Represents the... That inherits the parent element align-items attribute , If there is no parent element , Is equivalent to stretch.

auto	Set as parent element align-items value , If the element has no parent element , Set it to `stretch`
flex-start	On your side shaft Head alignment
flex-end	On your side shaft Tail alignment
center	flex The element will be aligned to The middle of the side shaft , If the element is wider than the container, it will overflow equally in both directions
baseline	be-all flex The elements are aligned along the baseline
stretch	flex The element will be stretched based on the width and height of the container

<!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>align-self attribute </title>
  <style> .container {
      display: flex; width: 600px; height: 400px; background-color: pink; align-items: flex-start; } .container span {
      width: 150px; height: 150px; background-color: purple; } /* align-self  Controls how the subitems themselves are arranged on the side axis  * auto:  Follow the parent's  algin-items Property style , If the element has no parent element , Set it to  stretch * flex-start： The default value is   From the head  * flex-end： Start with the tail  * center： Align in the center of the side axis （ * baseline： Baseline alignment  * stretch： The tensile  */ .container span:nth-child(3) {
      align-self: flex-end; } </style>
</head>

<body>
  <div class="container">
    <span>1</span><span>2</span><span>3</span>
  </div>
</body>

</html>

（3） order Property defines the order in which items are arranged

The smaller the numerical , The further up the line , The default is 0.

Be careful ： This attribute and z-index Dissimilarity

<!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> subprojects order attribute </title>
  <style> .container {
      display: flex; width: 600px; height: 400px; background-color: pink; } .container span {
      width: 150px; height: 150px; background-color: purple; margin: 10px; } .container span:nth-child(2) {
      /* order attribute ：  The default value is 0 , The smaller the numerical , The element balance is at the top  */ order: -1; } </style>
</head>

<body>
  <div class="container">
    <span>1</span><span>2</span><span>3</span>
  </div>
</body>

</html>