css使两个盒子并列_CSS布局模式

CSS 布局模式，有时简称为布局，是一种基于HTML元素盒子与其兄弟和祖辈盒子的交互方式来确定盒子的位置和大小的算法。

正常流（Normal flow）

也被称为文档流

指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。

通过使用其他布局技术，可以覆盖正常流，如：

• 弹性盒子布局（flexbox）
• 网格布局（grid）
• 浮动布局（float）

弹性盒子布局（flexbox）

Flexbox 是CSS 弹性盒子布局模块（Flexible Box Layout Module）的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。

要使用flexbox，你只需要在想要进行flex布局的父元素上应用display: flex ，所有直接子元素都将会按照flex进行布局。

父元素称为容器，子元素称为项目

注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

网格布局（Grid）

Flexbox用于设计横向或纵向的布局