flex入门—了解这些flex属性

时间 2019-11-16

标签 flex 入门了解这些属性栏目 Flex 繁體版

原文原文链接

传统的页面布局

在flex出现以前，双列布局，三列布局，动态盒居中,绝对居中布局等常见的布局均是采用dispaly+float+定位来布局的，通常包括如下几种布局策略：css

normal flow(文档流:块级元素从上到下，行内元素从左到右)
float + clear
position relative + absolute
display inline-block
负margin(扩大宽度，产生位移，如一行里的多个column)

flex来了

flex-即flexible,弹性的，灵活的，又叫弹性盒布局(flexible box layout)，这种布局方式主要有如下特色：html

块级布局侧重垂直方向，行内布局侧重水平方向，而flex是与方向无关的(来源于后续提到的一个重要属性flex-direction)
flex布局能够实现空间自动分配、自动对齐(弹性灵活的体现，与后续提到的flex-grow,flex-shrink，flex-basis属性有很大关系)
flex适用于简单的线性布局(左右或上下布局)，更复杂的布局须要用grid布局(如瀑布流布局)

基本概念

关于flex布局中，有如下几个基本常识值得注意：bash

如图所示flex布局中有两条轴线贯穿了外层容器，分别为主轴和侧轴(这里主轴不必定是水平方向的轴线，具体有flex-direction而定，即主轴和侧轴的方向是不必定的，也印证了flex布局是方向无关的)
主轴的尺寸为main size,侧轴的尺寸为cross size
主轴的起点和终点分别为main start和main end,对应的侧轴的起点和终点分别为cross start和cross end
应用了display:flex属性的元素叫作 flex container，即flex容器，它里面的子元素叫作flex item
flex 容器的宽度老是自动扩张到最大值(注意是宽度，无论主轴是哪一个方向，它的宽度老是会扩张到最大值,即便这个容器元素是行内元素如span,而子元素的宽度受多个属性影响，如flex-direction,align-items,flex-grow等，有时候看起来容器元素的宽度并不等于item元素宽度的和，以下图2所示)
flex 容器内的子元素即flex-item在不指定height,width的状况下老是自动收缩的(height原本就自动收缩，但当父元素display:flex后，这些子元素的宽度也都自动收缩，而没有了本来块级元素在宽度上自动扩张的特性)，一样的，这里不区分主轴的方向，height,width老是自动收缩
display:flex之后 float,clear,vertical-align等属性均失效

flex container的六大属性

flex-direction—方向

flex-direction 指定了子元素排列的方式，能够为row(按行展现)/column(按列展现)/inherit/row-reverse/column-reverse布局

例1. 当flex-direction为row时，显示效果以下：post

图2

其中html和css代码以下：测试

<div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
</div>

.container{
  display:flex;
  border:1px solid red;
  height:300px;
}
.item{
  border:1px solid black;
}
复制代码

例2.当为.container添加flex-direction:cloumn属性后，排列效果以下：flex

图3

图2，图3中的flex-item都没有指定width和height值，但咱们经过border能够看到看到，图2中的垂直方向的空间自动填满了container的宽度，即container此时在主轴方向的长度，图3中的水平方向的空间自动填满了container的高度，一样的，这也是container此时在侧轴方向的长度，这个如今和后续提到的align-items有关，不过咱们暂时能够作出以下总结：默认状况下，flex-item元素在其侧轴方向的长度老是自动扩张的(固然，后续会知道，只是默认状况，稍微改变align-items属性值，表现就会不同~)spa

flex-wrap

用于控制是否能够换行(按row排列时)/列(按column排列时)，当flex-wrap是nowrap时，全部items老是自动缩小而不会换行(列)3d

flex-flow

flex-direction和flex-wrap的缩写，如flex:row wrap实际上同时设置了 flex-direction:row和flex-wrap:wrap;code

justify-content

主轴方向的对齐方式，可取:flex-start/flex-end/center/space-around/space-between,默认为flex-start

align-items

侧轴方向的对齐方式，可取：flex-start/flex-end/center/stretch/baseline,默认为stretch(填满父空间,前提是不指定height值,当指定了height值时，会以该值为主),也就是以前提到的默认状况下，flex-item元素在其侧轴方向的长度老是自动扩张的

align-itmes:stretch和height同时存在时

为了测试指定height时，align-items：stretch仍是否会对元素项产生效果，进行了如下测试：

<div class="outer">
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
    <div>item4</div>
</div>

.outer{
    align-items:stretch;
}
.outer div:nth-child(1){
  height:200px;
}
复制代码

如图所示，因为align-items是stretch(也是默认值),因此除item1元素外的全部元素在侧轴方向都自动拉伸到最大了，而item1之因此没有自动拉伸，是由于对其显示设置了高度，此时能够理解为height属性的优先级要更高。

align-content

align-content属性和justify-content，align-items是相似的，都是控制item元素之间的摆放方式，只是该属性只有在主轴方向上有多个轴线时才有效，如flex-direction是row时，若是item有换行则align-cnotent属性值有效，当flex-direction是clolumn时，若是item有换列，则align-content有效，其中属性值能够取flex-start/flex-end/center/space-around/space-between/stretch

注意：justify-content是用于控制属于不一样的主轴线(能够想象为平行与主轴线)的元素在侧轴方向的的排列方式，其属性值包含space-around/space-between，没有stretch,而align-items是用于控制单个元素在侧轴方向的摆放的，其属性值包含stretch,不含space-around/space-between，align-content则用于控制当同一个侧轴有多个元素时，这些元素之间的摆放方式，它们便可取space-around/space-between，又可取stretch(当每个侧轴都只穿过一个元素时(即没有多个主轴线，没换行/列)，该属性失效)

align-content和align-items属性同时指定时

以flex-direction:row时为例，当item有多行时，align-content和align-items是同时有效的，align-content控制行于行之间的排列关系，align-items控制元素在一行中的位置，能够看下如下例子：

html和css部分以下：

<div class="outer">
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
    <div>item4</div>
  </div>

.outer{
  display:flex;
  border:1px solid red;
  height:300px;
  align-items:center;
  flex-wrap:wrap;
  align-content:flex-end;
}
.outer div{
  width:200px;
  border:1px solid black;
}
.outer div:nth-child(1){
  height:200px;
}

复制代码

效果以下所示：

图4

能够看到，如今item1和item2是处于一行的，item3和item4是处于一行的，因为align-content是flex-end,因此全部行依次排列在侧轴的终点处，同时因为align-items为center，因此item2处于它所在行的垂直方向的中点处(原来并不是相对于它的父元素垂直居中，而是相对于它所在的行垂直居中)

接下来，再看一下把align-items:center去掉的效果

图5

如图5所示，和刚才不一样的是，item2在没有指定高度的状况下自动拉伸为什么item1的高度(指定了200px)同样了，其实仍是由于align-items的效果，它虽然没有显示指定，但它的默认值是stretch，因此在它所处的行中在垂直方向自动拉伸了。

因此，当align-content有效时，不要觉得align-items就无效了，只是它们的做用不一样而已，一个控制不一样行元素相对于父元素(flex-container)的排列方式，一个用于控制元素在所处行中的垂直方向的位置(这里指的flex-direction为row,flex-direction为column时请自行推算~)

flex item的六大属性

flex-grow:多余空间自动分配比例

用于控制当主轴方向空间过多时，元素在主轴方向的长度自动增长；若是多个元素同时指定了flex-grow，则多余的空间会按照各自flex-grow值的比例自动分配

默认值：0

flex-shrink:超出空间自动收缩比例

当主轴方向空间不够时，使元素在主轴方向的长度自动收缩(即便为元素项设置了显示宽度width值，依然会根据须要自动收缩，不一样于以前container中的align-items属性值stretch会低于height的优先级)，以使得总长度可以适应container的长度(当应用了flex-wrap:wrap时，通常是不会自动收缩的，由于这时候自动换行/列了，不会空间不够)

默认值：1

flex-shrink和flex-wrap配合使用

flex-shrink的概念已经明了，看上去功能比较单一，不过不一样的属性值之间的搭配仍是会带来不少样化得效果的，尤为是这里就来看一下flex-shrink和flex-wrap的配合使用。

flex-shrink:0和flex-wrap:nowrap

下面看一下flex-shrink为0而且container没有设置flex-wrap属性时的效果:

html和css以下：

<div class="outer">
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
    <div>item4</div>
  </div>

.outer{
  display:flex;
  border:1px solid red;
  height:300px;
  align-content:flex-end;
}
.outer div{
  width:150px;
  
  border:1px solid black;
  flex-shrink:0;
}
.outer div:nth-child(1){
  height:200px;
}
.outer div:nth-child(2){
}

复制代码