CSS layouts are essential in front-end development, and here I’m going to use Flex to implement five common layouts. Let’s get familiar with Flex.

Flex layout (Elastic layout)

What is the Flex layout

Any container can be specified as a Flex layout

.box{
    display:flex;
}
Copy the code

Inline elements can also be laid out using Flex

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

Webkit-kernel browsers must be prefixed with -webkit

.box{ display:-webkit-flex; /*Safari*/ display:flex; }Copy the code

Note: When the Flex layout is set, the float, clear, and vertical-align attributes of the child elements are invalidated.

2. Basic concepts

  • Elements with a Flex layout are called Flex containers, or “containers” for short. All of its child elements automatically become container members and are called Flex items, or “items.”
  • The container has two axes by default: a horizontal main axis and a vertical cross axis. The starting position of the spindle (where it intersects with the border) is called main start and the ending position is called main end; The starting position of the intersecting axis is called cross start and the ending position is called cross end.
  • By default, items are arranged along the main axis. The main axis space occupied by a single project is called main size, and the cross axis space occupied is called cross size.

Properties of the container

There are six properties:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

3.1 the flex – direction

The flex-direction attribute determines the direction of the main axis (that is, the alignment of items).

The box {flex - direction: row (the default) | row - reverse | column | column - reverse; } /* ROW (default) : the main axis is horizontal, starting at the left end. Row-reverse: The main axis is horizontal and the starting point is at the right end. Column: The main axis is in the vertical direction, and the starting point is in the upper edge. Column-reverse: the main axis is in the vertical direction and the starting point is at the bottom. * /Copy the code

3.2 the flex – wrap

By default, projects are arranged on a line (also known as an “axis”). The flex-wrap property defines how to wrap a line if an axis does not fit.

The box {flex - wrap: nowrap (default) | wrap | wrap - reverse; } /* nowrap (default) : no line breaks; Wrap-reverse: wrap with the first line at the top */Copy the code

3.3 Flex-flow (Alignment)

The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is Row Nowrap.

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}
Copy the code

3.4 context-content (spindle alignment)

The context-content attribute defines the alignment of items on the main axis.

.box { justify-content: flex-start | flex-end | center | space-between | space-around; } /* flex-start (default) : left-align; Flex-end: right-align center: center; Space-between: both ends are aligned with equal intervals before items; Space-around: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border. (Neither side to the side) */Copy the code

3.5align-items (cross axis alignment)

.box { align-items: flex-start | flex-end | center | baseline | stretch; } /* stretch (default) : If the project is not set to height or set to auto, it will take up the entire container height. Flex-start: Alignment of the starting point of the cross axes. Flex-end: alignment of ends of crossed axes. Center: Alignment of the midpoint of the cross axis. Baseline: The baseline alignment of the first line of text of the project. * /Copy the code

3.6 the align – content

The align-content property defines the alignment of multiple axes. This property has no effect if the project has only one axis.

.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } /* stretch(default) : the axis occupies the entire cross axis; Flex-start: aligns with the starting point of the crossed axis; Flex-end: aligns with the end point of the crossed axis; Space-between: aligned with both ends of the intersecting axis and evenly distributed between the axes; Space-around: The spacing on both sides of each axis is equal. Therefore, the spacing between axes is twice as large as that between axes and frames; * /Copy the code

4. Project attributes

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

4.1 the order

The order attribute defines the order of items. The smaller the value is, the more advanced it is. The default value is 0.

.item {
  order: <integer>;
}
Copy the code

4.2 the flex – turns up

The Flex-Grow property defines the project’s zoom scale, which defaults to 0, or no zoom if there is free space.

.item {
  flex-grow: <number>; /* default 0 */
}
Copy the code

If all projects have a flex-Grow attribute of 1, they divide the remaining space equally, if any. If one project has a flex-grow attribute of 2 and all the other projects are 1, the former takes up twice as much free space as the other items.

4.3 the flex – the shrink

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.

.item {
  flex-shrink: <number>; /* default 1 */
}
Copy the code

If all projects have a Flex-shrink attribute of 1, they are scaled equally when space is insufficient. If the flex-shrink attribute is 0 for one project and 1 for all other projects, the former does not shrink when space is insufficient.

Negative values have no effect on this property.

4.4 the flex – basis

The Flex-basis property defines the main size of the project before allocating extra space. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, the original size of the project.

.item {
  flex-basis: <length> | auto; /* default auto */
}
Copy the code

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

4.5 Flex (Zoom in, Zoom out, Occupied Space)

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

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
Copy the code

This property has two shortcut values: auto (1 1 auto) and None (0 0 auto).

It is recommended to use this attribute in preference to writing three separate attributes, as the browser will infer related values.

4.6 the align – self

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

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

This property may take six values, all identical to the align-items property except auto.

The specific application

Classic top – middle – bottom layout

<div class="div1">
    <header>HEADER</header>
    <article>CONTENT</article>
    <footer>FOOTER</footer>
</div>
Copy the code

.div1 {
    min-height: 20vh;
    display: flex;
    flex-direction: column;
}
.div1>article {
    background-color: aqua;
    flex: auto;
}

.div1>header,
.div1 footer {
    background-color: rgb(46, 223, 140)
}

Copy the code

2. On the basis of up-middle-down layout, add the left fixed-width sidebar

    <div class="div2">
        <header>header</header>
        <div class="content">
            <aside>ASIDE</aside>
            <article>article</article>
        </div>
        <footer>footer</footer>
    </div>
Copy the code
        .div2 {
            min-height: 20vh;
            display: flex;
            flex-direction: column;
        }

        .div2 .content {
            flex: 1 0 auto;
            display: flex;
            background-color: aqua;
        }

        .div2 .content article {
            flex: 1 0 auto;
            background-color: darkgrey;
        }

        .div2 header,
        .div2 footer {
            background-color: bisque;
        }
Copy the code

3. Fixed-width sidebar is on the left, up-middle-down layout is on the right

<div class="div3">
    <aside>aside</aside>
    <div class="content">
        <header>header</header>
        <article>article</article>
        <footer>footer</footer>
    </div>
</div>
Copy the code
.div3 {
    display: flex;
    flex-flow: row;
    min-height: 20vh;
}

.div3 aside {
    background-color: aqua;
}

.div3 .content {
    display: flex;
    flex: 1 0 auto;
    flex-flow: column;
}

.div3 article {
    flex: 1 0 auto;
    background-color: antiquewhite;
}

.div3 header,
.div3 footer {
    background-color: aquamarine;
}
Copy the code

5.4 Up-middle-down layout with the header fixed at the top

<div class="div4">
    <header>HEADER</header>
    <article>CONTENT</article>
    <footer>FOOTER</footer>
</div>
Copy the code
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 60px;
}
header {
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
}
article {
  flex: auto;
  height: 1000px;
}
Copy the code

5 Left sidebar can scroll the left and right scroll bars are independent of each other.

The left sidebar is fixed to the left and at the same height as the window. When content exceeds the window height, a scroll bar appears inside the sidebar. The left and right scroll bars are independent of each other.

<div class="div5">
    <aside>
        <p>item</p>
        <p>item</p>
        <p>item</p>
        <p>item</p>
        <p>item</p>
        <p>item</p>
        <p>item</p>
        <p>item</p>
        <p>item</p>
        <p>item</p>
        <p>item</p>
        <p>item</p>
        <p>item</p>
        <p>item</p>
        <p>item</p>
        <p>item</p>

    </aside>
    <div class="content">
        <header>header</header>
        <article>
            <div class="content-text">content</div>
        </article>
        <footer>footer</footer>
    </div>

</div>
Copy the code
.div5 { height: 20vh; display: flex; flex-flow: row; } .div5 aside { background-color: aqua; flex: 0 1 20%; overflow-y: auto; max-height: 20vh; } .div5 .content { display: flex; flex: auto; flex-flow: column; overflow-y: auto; } .div5 header, .div5 footer { background-color: blanchedalmond; } /* Set vertical horizontal center */. Div5 article {flex: auto; background-color: aliceblue; display: flex; align-items: center; justify-content: center; height: 30vh; } .content-text{ height: 200px; }Copy the code