Summary of learning Flexbox experience

flex syntax

Elements that adopt Flex layout are called Flex containers (flex containers), referred to as "containers". All its child elements automatically become container members, called Flex items (flex items), referred to as "items".

Containers have two axes by default: the horizontal main axis (main axis) and the vertical cross axis (cross axis). The starting position of the main axis (the intersection with the border) is called main start, and the ending position is called main end; the starting position of the cross axis is called cross start, and the ending position is called cross end.

Items are arranged along the main axis by default. The main axis space occupied by a single item is called main size, and the cross axis space occupied by a single item is called cross size.

Properties on the container

The following 6 properties are set on the container:

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

flex-direction: The flex-direction property determines the direction of the main axis (i.e. the direction in which items are arranged).

row(默认) | row-reverse | column | column-reverse

flex-wrap: By default, items are arranged on a line (also called the "axis"). The flex-wrap attribute defines how to wrap the line if one axis cannot fit.

nowrap(默认) | wrap | wrap-reverse

flex-flow: The flex-flow attribute is the abbreviation of the flex-direction attribute and the flex-wrap attribute. The default value is row nowrap

justify-content: The justify-content attribute is defined The alignment of the item on the main axis.

flex-start | flex-end | center | space-between | space-around

align-items attribute: The align-items attribute defines how items are aligned on the cross axis.

flex-start | flex-end | center | baseline | stretch

align-content: The align-content attribute defines the alignment of multiple axes on the cross axis. If the item has only one axis, this property has no effect

flex-start | flex-end | center | space-between | space-around | stretch

Properties on the project

The following 6 properties are set on the project:

order

flex-grow

flex-shrink

flex-basis

flex

align-self

order: order property definition The order in which items are sorted. The smaller the value, the higher the ranking. The default is 0.

flex-grow: The flex-grow attribute defines the magnification ratio of the item. The default is 0, that is, if there is remaining space, it will not be enlarged.

If all items have a flex-grow property of 1, they will equally divide the remaining space (if there is any). If one item's flex-grow property is 2 and the other items are all 1, the former will occupy twice as much remaining space as the other items.

flex-shrink: The flex-shrink attribute defines the shrinkage ratio of the item. The default is 1, that is, if there is insufficient space, the item will shrink.

If the flex-shrink property of all items is 1, when there is insufficient space, they will all be reduced proportionally. If the flex-shrink property of one item is 0 and the other items are 1, the former will not shrink when there is insufficient space.

flex-basis: The flex-basis property defines the main axis space (main size) occupied by the item before allocating excess space. The browser uses this attribute to calculate whether there is extra space on the main axis. Its default value is auto, which is the original size of the project.

flex-basis: <length> | auto; /* default auto */

It can be set to the same value as the width or height attribute (such as 350px), and the item will occupy a fixed space.

flex: The flex attribute is the abbreviation of flex-grow, flex-shrink and flex-basis. The default value is 0 1 auto. The last two properties are optional.

This attribute has two shortcut values: auto (1 1 auto) and none (0 0 auto).

It is recommended to give priority to using this attribute instead of writing three separate attributes separately, because the browser will infer the relevant values.

align-self: The align-self attribute allows a single item to be aligned differently from other items and can override the align-items attribute. The default value is auto, which means inherits the align-items attribute of the parent element. If there is no parent element, it is equivalent to stretch.

align-self: auto | flex-start | flex-end | center | baseline | stretch

Layout

Grid layout

1 Basic grid layout

The simplest grid layout is even distribution. The item can be set to flex:1

.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
}

2 Percent layout

The width of a certain grid is a fixed percentage, and the remaining space is evenly allocated to the other grids.

Set width: percentage; or flex: 0 0 percentage; for items that require percentages; set flex for automatically allocated items: 1;

3 Holy Grail Layout

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="flex 圣杯布局">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body class="HolyGrail">
  <header>header</header>
  <p class="HolyGrail-body">
    <main class="HolyGrail-content">content</main>
    <nav class="HolyGrail-nav">left nav</nav>
    <aside class="HolyGrail-ads">right ad</aside>
  </p>
  <footer>footer</footer>
</body>
</html>

*{
  margin: 0;
}
.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  text-align: center;
}

header,
footer {
  flex: 0 0 40px;
  background-color: #ccc;
}

.HolyGrail-body {
  display: flex;
  flex: 1;
}

.HolyGrail-content {
  flex: 1;
  background-color: #0f0;
  
}

.HolyGrail-nav, .HolyGrail-ads {
  /* 两个边栏的宽度设为12em */
  flex: 0 0 12em;
  background-color: #00f;
}

.HolyGrail-nav {
  /* 导航放到最左边 */
  order: -1;
  background-color: #f00;
}

View demo

If it is a small screen, the three columns of the torso will automatically become vertical overlaps.

@media (max-width: 768px) {
  .HolyGrail-body {
    flex-direction: column;
    flex: 1;
  }
  .HolyGrail-nav,
  .HolyGrail-ads,
  .HolyGrail-content {
    flex: auto;
  }
}

4 Fluid layout

The number of items in each row is fixed and will be automatically divided into rows.

.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;
}

Compatible

*在旧版的规范中，使用比例伸缩布局时，子元素的内容长短不同会导致无法“等分”，这个时候，我们需要给子元素设置一个“width:0%”来解决问题。

*不要给flexbox里的子元素设置“margin:auto”的属性，在部分安卓机下，它会导致该元素的宽度撑开到100%占位

The above is the detailed content of Summary of learning Flexbox experience. For more information, please follow other related articles on the PHP Chinese website!