css-flex(弹性盒)/弹性布局

flex

• 是css中的有一种布局手段,它主要是用来代替浮动来完成页面布局
• flex可以使元素具有弹性,让元素可以跟随页面的大小的改变而改变

开启flex布局只需要在外层容器设置display:flex(整个网页也可以看做是一个flex容器)

弹性容器:

• 要使用弹性盒,必须先将一个元素设置为弹性容器(弹性容器都为父级元素)
• 我们通过display来设置弹性容器

       display:flex  设置块级弹性容器

       dispaly:inline-flex  设置行内弹性容器

父级元素设置弹性容器前后(默认为水平方向顺序排列)

 

弹性元素:

•  弹性容器的直接子元素才是弹性元素(弹性项)
• 一个元素可以同时是弹性容器跟弹性元素

主轴

弹性元素的排列方式称为主轴

侧轴

与主轴垂直方法称为侧轴

一类是容器的样式

 flex-direction: 指定容器中弹性元素的排列方向

            可选值:

• row              //水平排列(默认值左向右)
• row-reverse //反向水平排列(右向左)
• column       //纵向排列(上向下)
• column-resever //反纵向排列(下向上)

flex-wrap  是否自动换行

   设置弹性元素是否在容器中自动换行

   可选值:

•  nowrap  默认值,不会自动换行
•  wrap 元素沿着辅轴方向换行
• wrap-reverse元素沿着辅轴反向换行

flex-flow:wrap和direction的简写属性

flex-flow:row wrap

justify-content  主轴上的元素如何排列

 可选值:

•  flex-start: 元素按照主轴的起始排列
• flex-end: 元素按照主轴的终边排列
• flex-center:元素按照居中排列
• space-around:空白分布元素两侧
• space-evenly: 空白分布到单侧
• space-between:空白分布到元素的单侧

align-items: 元素在辅轴上如何对齐

 元素间的关系

可选值;

• strech 默认值,将元素的长度设为相同的值(指行与行之间的高度)
• flex-start 不会拉伸,按照主轴的起始排列
• flex-end: 元素按照主轴的终边排列
• flex-center:元素按照居中排列
• baseline  基线对齐(沿着文字的基线)

align-content  辅轴空白空间的分布

可选值

•  flex-start: 元素按照辅轴的起始排列
• flex-end: 元素按照辅轴的终边排列
• flex-center:元素按照居中排列
• space-around:空白分布元素两侧
• space-evenly: 空白分布到单侧
• space-between:空白分布到元素的单侧

 

 

 

一类是弹性元素的样式

flex-grow 指定弹性元素的伸展系数(按比例分布)

•   默认值为0,每一个元素的值越大占比就越多
•   当父元素有多于的空间时,子元素如何伸展
•   父元素的剩余空间,会按比例进行分配

flex-shrink  指定弹性元素的收缩系数

• 默认值为1,设置为0就不收缩了
• 当父元素的空间不足以容下所有的子元素是,如何对子元素进行收缩

flex-basis  元素的基础长度

•  主轴是横向的指定的是宽度
• 主轴是纵向的指定的是高度
• 默认值为auto,是元素的宽高

上面三个可以理解为弹簧的三种状态:

flex-basis静止状态/flex-shrink压缩状态/flex-grow 拉伸状态

可以简写:flex: 增长 缩减  基础

 

align-self:

用来覆盖当前弹性元素上的align-items

可选值

• strech 默认值,将元素的长度设为相同的值(指行与行之间的高度)
• flex-start 不会拉伸,按照主轴的起始排列
• flex-end: 元素按照主轴的终边排列
• flex-center:元素按照居中排列
• baseline  基线对齐(沿着文字的基线)

 

order  元素的排列顺序