Flex Flex layout

.box1 {
    display: flex;
}
.box2 {
    display: inline-flex;
}
Copy the code

An element with a Flex layout is called a Flex Container, and all of its children become Flex Items.

Note: With flex layout, the Float, clear, and vertical-align properties of the Flex item are invalid.

flex container

The container has two axes, the main axis (horizontal by default) and the cross axis (vertical by default). By default, all Flex items are arranged along the main axis without line breaks.

  • The flex-direction property determines the direction of the spindle
  • The flex-wrap property determines how to wrap a line if an axis does not fit
  • The flex-flow attribute is a shorthand for flex-direction and flex-wrap. The default value isrow nowrap.
  • The context-content attribute determines the alignment of flex items on the main axis
  • The align-items property determines how flex items are aligned on the cross axis
  • The align-content property determines how multiple axes are aligned, and does not work if the Flex item has only one axis.
.box {
    flex-direction: row | row-reverse | column | column-reverse;
}
.box {
    flex-wrap: nowrap | wrap | wrap-reverse;
}
.box {
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
.box {
    align-items: stretch | flex-start | flex-end | center | baseline;
}
.box {
    align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

/** stretch: flex-start: flex-end: space-between: space-around: space-between: space-around: space-around: space-around: space-around: space-around: space-around: space-around: space-around: space-around: space-around Both sides of each axis are equally spaced. So the space between axes is twice as large as the space between axes and flex Container borders
Copy the code

flex item

  • The order attribute determines the order in which flex items are sorted; the smaller the value, the higher the order.
  • The flex-grow property determines the scale of the project, which defaults to 0
  • The Flex-shrink attribute determines the size of the project, which defaults to 1
  • The Flex-basis property determines how much space the project will occupy on the main axis before remaining space is allocated. The default value is auto
  • The flex attribute is a shorthand for flex-grow, flex-shrink, and Flex-basis. The default value is0 1 auto.
  • The align-self attribute allows a single Flex item to have a different alignment than other Flex items. The default is auto.
.item {
    flex: 1 | auto | 1 1 auto;
}

.item {
    align-self: auto | stretch | flex-start | flex-end | center | baseline;
}
/** auto inherits the align-items attribute of the parent element **/
Copy the code

Grid layout

Applies to overall page layout

Divide the web page into grids, and you can arbitrarily combine different grids to make a variety of layouts. A parent element that uses a grid layout is called a Container, and a child element that uses a grid inside a Container is called an Item.

The horizontal area in a Container is called row, and the vertical area is called column. The area where a row and column intersect is called a cell. A grid line is a line that divides a grid.

.box1 {
    display: grid;
}
.box2 {
    display: inline-grid;
}
Copy the code

After the grid layout is set, float, display: inline-block, display: table-cell, vertical-align and other attributes of the Flex item are invalid.

A detailed tutorial: www.ruanyifeng.com/blog/2019/0…

Table layout

Tr tag (display: table-row;) :

  1. Height for tr is only min-height. By default, the height of the table is split equally.
  2. Tr tag setting width, margin does not work.

Td tag (display: table-cell;) :

  1. The default height of a TD tag inherits the tr height. If you set the height of any TD tag, the other TD tags will have multiple columns of equal height. By default, TD tags share the width of the table.
  2. Set the TD tagvertical-align:middleAll block-level non-block-level elements in TD are centered vertically with respect to TD

Horizontal and vertical center

<div class="box">
    <div class="content"></div>
</div>
Copy the code

Use table-cell

.box {
    display: table-cell;
    width: 600px;
    height: 600px;
    text-align: center;
    vertical-align: middle;
}
Copy the code

By using the inline – block

.box {
    text-align: center;
    vertical-align: middle;
}
.content {
    display: inline-block;
}
Copy the code

Single row horizontal and vertical center

<div class="box">
    <span>Simply simply simply</span>
</div>

<style>
.box {
    height: 200px;
    text-align: center;
    line-height: 200px;
}
</style>
Copy the code

Flex layout

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

Using the positioning

.box {
    position: relative;
}
.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(50%, 50%); }Copy the code

Fixed width on both sides, adaptive in the middle

Using floating

<div class="box clearfix">
    <div class="left">On the left side of the</div>
    <div class="right">On the right side</div>
    <div class="content">The main content</div>
</div>

<style>
.content {
    height: 300px;
    margin: 0 200px;
    background: red;
}
.left {
    width: 200px;
    height: 300px;
    background: rgb(210210210);float: left;
}
.right {
    width: 200px;
    height: 300px;
    background: rgb(120120120);float: right;
}
</style>
Copy the code

By using the inline – block

<div class="box">
    <div class="item">On the left side of the</div><! -- --><div class="item content">The main content</div><! -- --><div class="item">On the right side</div>
</div>

<style>
.item {
    display: inline-block;
    width: 200px;
    height: 300px;
}
.content {
    width: calc(100% - 400px);
}
</style>
Copy the code

Using the flex

<div class="box">
    <div class="item">On the left side of the</div>
    <div class="item content">The main content</div>
    <div class="item">On the right side</div>
</div>

<style>
.box {
    display: flex;
}
.item {
    flex: 0 1 200px;
    height: 300px;
}
.content {
    flex: 1 1 auto;
}
</style>
Copy the code

Absolute bottom layout

<div class="box">
    <div class="content"></div>
    <div class="footer"></div>
</div>

<style>
.box {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content {
  background: blue;
  height: 100px;
}
.footer {
  background: red;
  height: 200px;
  margin-top: auto; /** Can only allocate the remaining space **/
}
</style>
Copy the code

Refer to the link

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