flex布局 flexible灵活的

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

在传统的布局方式中我们常采用:在盒模型的基础上使用定位,浮动,display转换元素的显示模式,但是有些效果实现起来很不方便,w3c提出了解决方案使用flex布局,flex可以灵活,响应式的实现各种页面布局

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

flex在pc端有兼容性问题(ie11或更低版本不支持或仅部分支持),多用于移动端开发,传统布局多用于pc端开发,pc端若不考虑兼容性也可以使用flex布局

要使用弹性盒,就要使用display属性将一个元素设置为弹性容器

弹性容器:

display:flex 将元素设置为块级弹性容器,元素独占一行 用的较多

display:inline-flex 将元素设置为行内弹性容器 元素可以和其他元素在同一行展示

弹性元素:

弹性容器里的直接子元素(亲儿子)是弹性元素(弹性项)

一个元素可以同时是弹性容器和弹性元素

注意:

  • 通过给父元素设置flex属性来控制子元素的排列方式

  • 任何元素都可以采用flex布局,行内元素也可以指定为flex布局,行内元素采用了flex布局后可以直接设置宽高无需转换

  • 当我们为父元素设置了flex布局后,子元素的float,clear,vertical-align属性将失效

  • 被指定为flex布局的元素叫做flex容器,它里面的所有子元素就是flex项目,简称为项目

flex相关的属性有的是要设置在父元素上的有的是要设置在子元素上的

父元素设置的属性:

1:需要给父元素设置display:flex;就是知道这个盒子就是弹性容器,采用flex布局

flex-direction

取值:

  • row 默认值 弹性元素在容器中水平排列,由左向右 主轴为水平方向,起点在左端

  • row-reverse 弹性元素在容器中水平排列,由右向左 主轴为水平方向,起点在右端。

  • column(列) 弹性元素在容器中垂直排列,自上而下 主轴为垂直方向,起点在上沿

  • column-reverse 弹性元素在容器中垂直排列,自下而上 主轴为垂直方向,起点在上沿

作用:决定flex容器主轴的方向,弹性元素排列方向称为主轴(即项目排列的方向,子元素是根据主轴排列的),

与主轴垂直方向的称为侧轴

  • flex布局的容器有两根轴主轴和侧轴,主轴和侧轴没有固定;默认情况下水平方向为主轴,垂直方向为侧轴,flex-direction可以转换主轴的方向,

justify-content

作用:设置子元素在主轴上的排列方式(如何分配主轴上的空白空间)

使用该属性前一定要确定好哪个方式是主轴

取值:

  • flex-start:默认值 子元素在主轴的头部对齐

  • flex-end 子元素在主轴的尾部对齐

  • center 子元素在主轴上居中对齐

  • space-between 子元素在主轴上两端对齐,项目之间的间隔相等

  • space- around 每个子元素两侧的间隔相等,所以,项目之间的间隔比项目与两端的间隔要大一倍

  • space-evenly。 空白分布到元素的单侧 有兼容性问题

flex-wrap

作用:默认情况子元素都在一条轴线上排列,flex-wrap属性指定当子元素在一行排不下时如何换行

取值:nowrap 默认值 子元素不自动换行,子元素会被压缩

     wrap   换行,第一行在上方  元素沿着副轴方向自动换行

wrap-reverse 换行,第一行在下方 元素沿着副轴反方向换行

flex-flow

flex-flow是flex-direction和flex-wrap的简写属性。没有书写顺序

flex-flow:row wrap;

align-item

  • 作用:设置单行子元素在侧轴上的排列方式

  • 取值:

    flex-start: 侧轴的起点对齐

    flex-end:侧轴的终点对齐

    center:在侧轴的中点对齐

    stretch 拉伸 默认值 在子元素没有设置高度或设为auto时,在侧轴上拉伸弹性元素使其占满整个容器的高度

    baseline 弹性元素第一行文字基线对齐

align-centent

  • 作用:设置多行子元素在侧轴上的对齐方式 多行即是子元素有换行的情况,该属性在子元素为单行的情况下不起作用

  • 取值:

    • flex-start: 侧轴的起点对齐

    • flex-end:侧轴的终点对齐

    • center:在侧轴的中点对齐

    • space- around 每根轴线两端的间隔相等,所以轴线与轴线之间的间隔比轴线与边框之间的间隔要大一倍

    • space-between 与侧轴两端对齐,轴线之间的间隔平均分配

    • stretch 拉伸 默认值,轴线占满整个侧轴

设置在子元素(项目)上的属性

Flex-grow属性

作用:定义弹性元素放大比例。即当父元素有多余空间时,弹性元素如何分配剩余空间,剩余空间是值父元素剪去那些已经设置尺寸元素后所剩下的空间

  • 使用flex-grow定义子元素在剩余空间所占的分数

    • flex-grow取值:0|数字

    • flex-grow:0;表示该即是存在剩余空间,该子元素也不放大

      • 如果所有的子元素flex-grow的值都为1,则他们将等分剩余空间

      • 如果有一个子元素flex-grow的值为2,其他的子元素flex-grow:1,则为2的子元素分配剩余空间时所占的剩余空间比其他子元素多一倍

flex-shrink属性

作用:定义项目(子元素)缩小的比例,默认值为1;即在父元素中的空间不足的以容纳所有子元素时,弹性元素如何缩小 (弹性元素缩小的是根据flex-shrink和元素本身的大小来共同决定的,比较复杂不要深究)

格式:flex-shrink:numeber

  • 如果所有项目的flex-shrink属性值都为1,在空间不足时他们将等比例缩小。

  • 如果有一个项目的flex-shrinks属性值为0,其他项目的值为1,在空间不足时前者不会缩小

  • 负值对该属性无效

flex-basis (可不讲)

作用:设置弹性元素在主轴上的基础长度 就像一个弹簧的静止状态时的自身长度,如果设置了该属性,元素本身设置的宽高属性就没有作用了

当弹性容器的主轴为水平方向时,flex-basis决定了元素的元素的宽度

当弹性容器的主轴为垂直方向时,flex-basis决定了元素的元素的高度

默认值为auto,参考元素自身的高度或者宽度

如果flex-basis设置了一个具体的数值,则以该值为准

flex简写属性

flex属性时flex-grow flex-shrink flex-basis的简写属性

默认值为 flex:initial; 即表示: flex:0 1 auto;

快捷键: flex:auto; 即表示 flex:1 1 auto;

flex:none; 即表示 flex:0 0 auto; 不能放大,缩小即弹性元素没有弹性

align-self

作用:在元素是单行的情况下,允许某单个项目与其他项目在侧轴上的对齐方式不同,设置该项目自己在侧轴上的对齐方式。

对该单个项目而言,设置了aglin-self属性会覆盖父元素align-items的属性作用在它身上的属性

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
  • 默认值为auto,表示继承父元素align-items的属性,如果没有父元素,则等同于stretch

  • 属性值除了auto以外,其他的同align-items一样

order

作用:定义弹性元素在页面上的排列顺序(前后顺序)

取值为数值 默认值为0,数值越小,排列的越靠前

  • 不改变html结构

  • 可以有负值

国王排名:

https://js.design/v?i=GMn7GY&p=GBl1da2K2u&mode=programmer&f=A55MmNz9tFAjpUlBQ0NMO