当前位置: 首页 > >

Flex 布局常见的几种方式

发布时间:

flex 之前的布局方式


normal flow(正常流或叫文档流) float + clear position relative + absolute display inline-blockmargin

flex 布局特点


    块级元素侧重垂直方向、行内布局侧重水*方向,flex 布局是与方向无关的。flex 布局可以实现空间自动分配、自动对齐(flexible:弹性、灵活)flex 适用于简单的线性布局,更复杂的要交给gird 布局


flex container的六大属性:
属性含义
flex-direction方向
flex-wrap换行
flex-flow上面两个的简写
justify-content主轴方向对齐方式
align-items侧轴对齐方式
align-content多行/列内容对齐方式(用的较少)

解释:
继承
起始
反向一行
一列排列
反向一列排列


flex-wrap
换行


justify-content
多的空间放在所有元素中间
多的空间放在所有元素周围
所有元素往主轴的起点靠
所有元素往主轴的终点靠
所有元素往主轴的中间靠


align-items
所有元素往侧轴的起点靠,不要伸开
所有元素往侧轴的终点靠,不要伸开
所有元素往侧轴的中间靠,不要伸开


align-content多行才有用,和justify-content用法差不多,只有一行的时候align-content没有任何效果。


flex item的属性
属性含义
flex-grow增长比例(空间过多时)
flex-shrink收缩比例(空间不够时)
flex-basis默认大小(一般不用)
flex上面三个的缩写
order顺序(代替双飞翼)
align-self自身的对齐方式,可以让每个子元素有自己的对齐方式

常见的一些布局方式:






header

段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落


段落













友情链接: