flex布局


flex布局

一、使用注意

将元素display声明为flex,该元素将成为flex布局的父元素,下一级的直系子元素将成为flex子项

flex容器内元素,即flex item的float,clear、vertical-align属性将失效

二、flex容器属性

1、flex-direction 排列方向

row:主轴为水平方向,项目沿主轴从左至右排列

column:主轴为竖直方向,项目沿主轴从上至下排列

row-reverse:主轴水平,项目从右至左排列,与row反向

column-reverse:主轴竖直,项目从下至上排列,与column反向

2、flex-wrap 换行方式

nowrap:自动缩小项目,不换行

wrap:换行,且第一行在上方

wrap-reverse:换行,第一行在下面

3、flex-flow flex-direction和flex-wrap的简写

默认值为row nowrap

4、justify-content 主轴对齐方式

flex-start:左对齐

flex-end:右对齐

center:居中对齐

space- between:两端对齐

space-around:沿轴线均匀分布

5、align-items 交叉轴对齐方式

6、align-content 多行交叉轴对齐方式

定义了align-content后,align-items属性将失效

flex-start:左对齐

flex-end:右对齐

center:居中对齐

space-between:两端对齐

space-around:沿轴线均匀分布

stretch:各行将根据其flex-grow值伸展以充分占据剩余空间

三、flex item属性详述

item的属性在item的style中设置。

1、order

order的值是整数,默认为0,整数越小,item排列越靠前

2、flex-grow

定义当flex容器有多余空间时,item是否放大。默认值为0,即当有多余空间时也不放大;可能的值为整数,表示不同item的放大比例

3、flex-shrink
定义当容器空间不足时,item是否缩小。默认值为1,表示当空间不足时,item自动缩小,其可能的值为整数,表示不同item的缩小比例。

4、flex-basis

主轴占据空间,默认值为auto。

5、flex

flex属性是flex-grow、flex-shrink和flex-basis三属性的简写总和。

6、align-self

align-self属性允许item有自己独特的在交叉轴上的对齐方式,它有六个可能的值。默认值为auto

auto:和父元素align-self的值一致

flex-start:顶端对齐

flex-end:底部对齐

center:竖直方向上居中对齐

baseline:item第一行文字的底部对齐

stretch:当item未设置高度时,item将和容器等高对齐

四、比值排序

1、等比

.div1{flex:1;}
.div2{flex:1;}
.div3{flex:1;}

2、左固定,其余等比

.div1{width:20%;}
.div2{flex:1;}
.div3{flex:1;}

3、左右固定,其余等比

.div1{width:20%;}
.div2{flex:1;}
.div3{width:20%;}

文章作者: hn-failte
文章链接: https://failte.cn
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 hn-failte !
评论
 上一篇
DIV+CSS布局 DIV+CSS布局
DIV+CSS布局 一、DIV结构 │body {} /* 这是一个HTML元素 */ └#Container {} /* 页面层容器 */ ├#Header {} /* 页面头部 */ ├#MianBody {} /* 页面主体 *
2020-07-08
下一篇 
Windows命令控制台默认编码问题 Windows命令控制台默认编码问题
[TOC] Windows命令控制台默认编码问题 有遇到过在Windows命令行中乱码的问题吗?今天的主题就是这个。解决命令控制台默认编码问题。 1、默认编码 Windows在中国的默认编码为936,即gb2312 2、查看当前编码 chc
2020-05-07
  目录