CSS three ways to implement three-column layouts (with code)

This article introduces to you about the CSS implementation of the three-column layout of three ways (with code), there is a certain reference value, the need for friends can refer to, I hope to help you.

Floating layouts

Divided into three Div, the other parent contains the three Div, using float,

Note points: Three div,left---Right---> center in this order

<! DOCTYPE html>
Flex

Set the middle box flex:1 so that you can adapt to the default horizontal arrangement

<! DOCTYPE html>
Flex-related knowledge points, which are commonly used in

1. Set Display:flex

2. Container diagram:

Axes: Horizontal main axis and vertical cross axis

3. Container Properties

Flex-direction: direction of spindle, row | Row-reverse | Column | Column-reverse;

Flex-wrap: Line break, nowrap | Wrap | Wrap-reverse;

Flex-flow:flex-direction and Flex-wrap Shorthand

Justify-content: Alignment on spindle, Flex-start | Flex-end | Center | Space-between | Space-around;

Align-items: How to align on the cross axis, Flex-start | Flex-end | Center | Baseline | Stretch

Absolute positioning Alignment

<! DOCTYPE html>