flex布局

Flex是Flexible Box的缩写,是一种用于在页面上布置元素的布局模式,使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。对于许多应用程序，弹性盒子模型提供了对模块模型的改进，因为它不使用浮动，Flex容器的边缘也不会与其内容的边缘折叠。

 

定义一个flex盒子，使用下列方式，

display：flex；
display：inline - flex；

 

flex 容器的属性

• flex - direction 方向
• flex-wrap 换行
• flex - flow 上面两个的简写
• justify - content 主轴方向对齐方式
• align - items 侧轴对齐方式
• align - content 多行/列内容对齐方式

 运用代码如图

 

 

 编写第一个盒子

样式如图所示

运用row将3个box从左到右排列

利用属性编写样式

 

 

 编写第二个盒子

样式如图所示

 

 编写第三个盒子

样式如图所示

 

flex: 1是一个属性，用于设置Flexbox布局中子元素如何分配剩余空间。具体来说，它指定一个子元素的伸展比例，以便在剩余空间中分配空间时确定每个子元素的大小。在flex布局中，1表示子元素的伸展比例是1