flex伸缩布局

Front-end

2019-02-19

126

0

伸缩布局
display:flex;让大盒子成为容器,容器有主轴和侧轴;
子盒子是容器的项目,项目默认会从主轴的起点沿主轴的方向依次排列,如果超过容器,则会自动收缩,不换行 所以一定要注意当前主轴的起点在什么地方

容器的6个属性:写在容器的css里
---1---
flex-direction控制主轴的方向:
row→:默认值,主轴呈现水平方向从左往右
column↓:主轴呈现垂直方向从上往下,项目会垂直排列,侧轴会变成水平方向从右往左
row-reverse← 主轴呈现水平方向从右往左,项目的排列也会反过来
row:默认值,主轴呈现水平方向从左往右
column-reverse↑ 主轴呈现垂直方向从下往上,项目的排列也会反过来
---2---
justify-content: 控制项目在主轴的对齐方式,是项目整体对齐,不会颠倒项目的位置和次序
flex-start:以主轴的起点对齐
flex-end:以主轴的终点对齐
center:居中对齐
space-between 沿主轴两端对齐
space-round:环绕对齐,每个项目的左右间隙的距离相同
---3---
flex-wrap:控制项目是否换行
no-wrap不换行,默认值
wrap换行
wrap-reverse 反着换行。第一行在下面
---4---
flex-flow:默认值row nowrap,是flex-direction和flex-wrap两种属性的简写
---5---
align-items:控制项目在侧轴单行情况下的对齐方式,如果是多行,则不起作用
flex-start:侧轴的起点对齐,不是默认值
flex-end:侧轴的终点对齐
center:侧轴的中点对齐
没有两端对齐和围绕对齐,因为是单行
stretch:默认值,如果项目有height,该属性的拉伸效果没有,如果没有设置高度,则回让项目的高度和容器的高度保持一致
---6---
align-content:定义了多行在侧轴的对齐方式,如果项目是单行,则不起作用
flex-start:侧轴的起点对齐,不是默认值
flex-end:侧轴的终点对齐
center:侧轴的中点对齐,居中对齐
没有两端对齐和围绕对齐,因为是单行
space-between 沿侧轴两端对齐
space-round:环绕对齐,每个项目的上下间隙的距离相同
stretch:默认值,如果项目自身有高度,,则拉伸效果是没有的,但是排列的位置还是在轴线的最顶端

项目的属性
---1---
order:设置项目间的排序
默认值是0,值越小,越靠前
---2---
flex-grow:定义项目的放大比例,
默认值是0,即使有剩余空间也不会放大
1,将剩余空间均分,
将项目的flex-grow属性值相加,就是将剩余空间分成几份,根据每个项目所设的flex-grow值,来判断每个项目在剩余空间里面占几份
---3---
flex-shrink:定义项目的缩小比例,
默认值是1 一旦超出容器,自动缩小
0 就是不缩小
负值对该属性无效
---4---
flex-basis:官方认证的宽度属性
默认值是auto
像素,百分比,设置多少,项目的宽度就是多少,就算项目本身设置了width,也没有效果,也就是比width的权重高
---5---
flex 是flex-grow、felx-shrink、flex-basis三者的简写
---6---
align-self:是对align-items的补充,允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性值和align-items一样

参考:阮一峰 flex布局教程

发表评论

全部评论:0条

lmy233

努力工作学习生活的人呐~~

联系方式

神圣之子仅供学习交流
E-mail:limengyu233@163.com
github:https://github.com/lmy01