CSS Float Layout – Ditch Float and Empress Flex

The blog instructions

The information involved in the article comes from the Internet and personal summary, meaning is personal learning and experience summary, if there is any local infringement, please contact me to delete, thank you!

instructions

When you write the front-end code, write a row of float:left, float: right, and then clear:both; Sometimes, if you forget to clear the float, the page will become stale.

Is to eat the loss of float, code written much, but also easy to lose. So I look away and I see Flex.

Flex layout

Flex is called an elastic layout, and it provides maximum flexibility for box-like models. Any container can be specified as a Flex layout. Elements that use Flex are called Flex containers. The child elements inside are called items, and the items’ float, clear, and vertical-align attributes are invalidated.

// Flex layout. Box {display: Flex; } // Layout the inline elements using Flex. Box {display: inline-flex; } // Webkit-centric browsers must be prefixed with '-webkit'. Box {display: -webkit-flex; /* Safari */ display: flex; }

Containers and Projects

Since it is divided into container and project, it is roughly the following relationship, mainly record the container attributes and project attributes.

Container attribute

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
The flex – direction attribute

Determine the orientation of the main axis (i.e. the direction in which items are arranged)

Values: the row (the default) | row – reverse | column | column – reverse

  • Row (default) : The main axis is horizontal and the starting point is on the left.
  • Row-reverse: The main axis is horizontal, starting at the right end.
  • Column: The main axis is vertical and the starting point is on the top edge.
  • Column-reverse: The principal axis is in the vertical direction, starting at the bottom edge.

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
The flex – wrap attributes

Controls whether the item is wrapped

Values: nowrap (default) | wrap | wrap – reverse

  • Nowrap (default) : No line breaks, bisects the container.
  • Wrap: Items do not divide the width of the container. Instead, they are arranged according to their own width. If they exceed the width of the parent container, they wrap the line naturally.
  • The reverse effect of wrap is to reverse the effect of wrap.

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
The flex – flow properties

The flex-flow property is a shortened form of the flex-direction property and the flex-wrap property, and the default value is row nowrap.

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}
The justify – content attribute

Controls the alignment of items on the horizontal axis

Values: flex – start (the default) | flex – end | center | space – between | space – around | space – evenly;

  • Flex-start (default) : Left aligned.
  • C) center D) center
  • Flex-end: Right-aligned.
  • Space-between: Aligned left and right, meaning items on the left and right are attached to the container with equal spacing between items.
  • Space-around: The spacing between items is twice the spacing between items and containers on the left and right sides.
  • Space-instituted: evenly spaced between projects and evenly spaced between projects and containers.

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
The align – the items property

Controls how items are arranged on the vertical axis

Values: flex – start | flex – end | center | baseline | stretch (default)

  • Flex-start: Align the starting point of the crossover axis.
  • Flex-end: Align the end points of the crossover axes.
  • Center: Align the midpoints of the crossover axes.
  • Baseline: The alignment of the first line of text in the project.
  • Stretch (default) : If the project has no height set or is set to AUTO, it will cover the entire height of the container.

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
The align – content attribute

Controls the alignment of multi-line items. This does not work if the item has only one line

Values: flex – start | flex – end | center | space – between | space – around | space – evenly | stretch (default);

  • Flex-start: Align with the starting point of the crossover axis.
  • Flex-end: Aligns to the end of the crossover axis.
  • Center: Align with the midpoint of the crossover axis.
  • Space-between: Aligned with both ends of the cross axes, and the spacing between axes is evenly distributed.
  • Space-around: Both sides of each axis are equally spaced. Therefore, the spacing between the axes is twice as large as the spacing between the axes and the border.
  • Stretch (default) : Axis covers the entire cross axis.
  • Space-instituted: evenly spaced between projects and evenly spaced between projects and containers.

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch | space-evenly;
}

The project properties

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self
Order attribute

Property defines the order in which items are sorted. The smaller the number, the higher the rank, which defaults to 0.

.item {
  order: <integer>;
}

The flex – turns up properties

Define the zoom scale of an item, which defaults to 0, meaning that if there is space left, it will not zoom in.

.item {
  flex-grow: <number>; /* default 0 */
}
The flex – the shrink properties

The flex-shrink attribute defines the size of the project, which defaults to 1, meaning that the project will shrink if it runs out of space. When the flex-shrink attribute is 0 and all other items are 1, the flex-shrink does not shrink when there is insufficient space.

.item {
  flex-shrink: <number>; /* default 1 */
}
The flex – the basis properties

By default Auto, the project will either remain the default width or have width as its own width

If the flex-basis is set, the widtn property is overridden.

.item {
  flex-basis: <length> | auto; /* default auto */
}
Flex properties

The flex attribute is short for flex-grow, flex-shrink, and flex-basis. The default value is 0, 1 auto. The last two properties are optional.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
The align – self properties

The align-self attribute allows a single item to have different alignment than other items, and overrides the align-items attribute. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it is equivalent to stretch.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Thank you

Universal network

Novice tutorial

Nguyen Yifeng’s Flex layout

And my hardworking self, personal blog, GitHub