CSS flex

Preface:

A senior front man was hired by the company a few years ago, and the conversation turned to his previous job interview. At the same time, he felt his own shortcomings. I had the idea to blog again. Blog writing on the one hand to consolidate the previous knowledge, on the other hand to record and urge learning new knowledge content.Copy the code

1. Meet the flex

Flex, short for Flexible, stands for flexible layout and is used to provide maximum flexibility to box models. Any container can be specified as a Flex layout (including inline elements) :

div { display: flex}
Copy the code

The float clear vertical-align element will have no float clear vertical-align when the Flex attribute is set

2. Compare the Flex layout with the normal layout

  • General layout:

    • Block-level elements are arranged top-down
    • The element has only height, and when there is no width, the width defaults to 100%
    • The element only has width, and when there is no height, the height is 0

  • Flex layout

    • Elements in a container are arranged from left to right by default
    • The element has only height, and if it has no width, the width is 0
    • The element only has width, and the height defaults to 100% when there is no height

By default, elements that become Flex containers have two axes: main axis and cross axis. The main space occupied by a single project is called main size, and the cross axis is called cross size, as illustrated in the following diagram:

3. The flex properties

  • Flex-direction Changes the direction of the main axis. By default, row is aligned horizontally. Attribute contains the row | row – reverse | column | column – reverse
  • Flex-wrap controls element newlines. Attribute contains nowrap | wrap | wrap – reverse
  • Align-content Controls the alignment of multiple axes. This property has no effect if the project has only one axis. Attribute contains the flex – start | flex – end | center | space – between | space – around | stretch
  • Context-content controls alignment on the main axis. Attribute contains the flex – start | flex – end | center | space – between | space – around
  • Align-items controls how the cross axis is aligned. Contains the properties of the flex – start | flex – end | center | baseline | stretch
  • The align-self attribute allows a single item to be aligned differently than other items. Contains the properties of the auto | flex – start | flex – end | center | baseline | stretch
  • The order attribute controls the order in which the elements are sorted, with the smaller the value, the higher the order.
  • The Flex-Grow property defines the project’s zoom scale, which defaults to 0, or no zoom if there is free space.
  • The Flex-shrink attribute defines the scale by which a project shrinks. The default is 1, that is, if there is insufficient space, the project shrinks.
  • The Flex-basis attribute defines how much space an item occupies on the main axis. The default is Auto, the original size of the element.
  • The flex attribute is short for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 Auto.

You can use Flex to achieve sieve layout, but also exercise the use of Flex properties

4. Use Flex

  • You can use Flex for a centered layout
<style>
/* Use Flex for layout */
.wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    width: 100%;
    border-bottom: 1px solid black;
}
.box {
    height: 200px;
    width: 200px;
    background: red;
}

</style>

<body>

<div class="wrap">
    <div class="box"></div>
</div>

</body>
Copy the code
  • Use Flex for easy flexible scaling layouts

<style>
* {
    margin: 0;
    padding: 0;
}
body.html {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
}
header {
    flex: 0 0 100px;
    background: #cecece;
}
.content {
    flex: 1;
    background: yellow;
    display: flex;
}
aside {
    background: pink;
    flex: 0 1 25%;
}
section {
    flex: 1;
}
footer {
    flex-basis: 70px;
    background: red;
}
</style>    
</head>
<body>
<header>
    header
</header>
<div class="content">
    <aside></aside>
    <section></section>
</div>
<footer>
    footer
</footer>
</body>
Copy the code

Using Flex proficiently is faster and easier than using Float, but it doesn’t work well with earlier versions of IE. The use of float layouts is still recommended if IE requires it.