float浮动和flex布局

1.float 浮动

浮动元素的顶部，在标准文档流的底部

1. 对div2进行浮动：浮动元素的顶部，在标准文档流的底部
2. 对div3和div3进行浮动：浮动元素会显示在同一行，依次排列
3. 对div2、div3和div4进行浮动：如果宽度不够，被浮动的元素会自动换行
4. 对div2、div4进行浮动：浮动元素的顶部，在标准文档流的底部

2.position 定位

relative 相对定位：相对原来位置，偏移一定距离

absolute 绝对定位：相对于position不为static的父元素，偏移一定距离

父相子绝：父元素relative，子元素absolute

fixed 固定定位：相对浏览器定位

static 没有定位：

2.flex布局

父元素属性

flex-direction 调整主轴方向

row                    行排布

row-reverse       同一行反向排布

column               列排布

column-reverse  同一列反向排布

justify-content  主轴子元素排列

flex-start              从头部排列

flex-end               从尾部排列

center                  居中排列

space-around      平分剩余

space-between    两边贴边，平分剩余

align-items  侧轴方向，子元素的排列

flex-start               从上到下
flex-end                从下到上
stretch                  拉伸（子元素去掉高度）
center                   居中

flex-wrap  属性 子元素是否换行

wrap                     换行
Nowrap                 不换行

flex-flow 属性： 复合属性，flex-direction和flex-wrap

flex-flow:row-wrap

align-content属性 子元素整体，在父元素中的对齐方式

flex-start                侧轴头部排列
flex-end                 侧轴尾部排列
center                    居中排列
space-around        侧轴平分空间
space-between      两侧贴边，平分剩余空间

子元素属性

flex属性 份数

flex:1

align-self属性 自己的对齐方式

stretch                     拉伸
center                      居中
start                         左对齐
end                          右对齐

原文地址：https://www.jb51.cc/wenti/3280748.html