CSS之flexbox指南

控制对齐方式需要用到的的属性

为了控制“对齐”,会用到以下属性:
justify-content——控制主轴(main axis)上所有item的对齐;
align-items——控制交叉轴(cross axis)上所有item的对齐;
align-self——控制交叉轴(cross axis)上某一特定item的对齐;
align-content——当项目的数量多到占据多行时,控制交叉轴(cross axis)上每行之间空间的分布情况;

主轴(main axis)&交叉轴(cross axis)

主轴交叉轴就相当于一个二维坐标系的横轴和纵轴。
当在容器的css参数中,设置display:flex;后,该容器即成为一个flex box。
这时,我们可以通过设置flex-direction:row;或者flex-direction:column;来控制容器中的item的排布方向。
row代表横向排布,column代表纵向排布。
另外还可以取的值是:row-reversecolumn-reverse,他们相对于rowcolumn只是换了个方向而已。
值得注意的是,主轴与交叉轴的方向会根据flex-direction值的不同而变化。
flex-direction:row时,主轴和交叉轴的关系如下图所示:

《CSS之flexbox指南》

而当flex-direction:column时,主轴与交叉轴的关系如下图所示:

《CSS之flexbox指南》

justify-content

例:

<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="container">  
            <div class="item">one</div>
            <div class="item">two</div>
            <div class="item">three</div>
            <div class="item">four</div>
            <div class="item">five</div>      
        </div>
</html>

css文件:

html, body {
    margin: 0;
    padding: 0;
}

.container{
    height: 600px;
    width: 600px;
    margin-top: 20px;
    margin-left: 20px;
    display: flex;
    border: 1px dotted black;
    flex-direction: row;
}

.item{
    background-color: #666;
    margin-right: 2px;
}

可以看到,我们有一个高600px,宽600px的容器。并为该容器设置了display:flex;,还通过flex-direction:row;规定其中item的排布方向为横向排列。
我们只为其中的item设置了背景色和一个2px的右边距。
效果如图:

《CSS之flexbox指南》
可以看到,当没有设置item的高、宽属性时,item在容器中默认是拉伸填满容器的。
现在,我们为item设置高、宽属性:

.item{
    width: 100px;
    height: 100px;
    background-color: #666;
    margin-right: 2px;
}

效果如下图:

《CSS之flexbox指南》
可以看到,拉伸效果消失了。
而且,所有的item都自动左对齐了。那么如果我们想让item都右对齐,应该怎么做呢?
这个时候justify-content属性就派上用场了。
justify-content属性,简单说来,就是控制item在主轴上的对齐方式。
其可取的值有:
justify-content: flex-start
justify-content: flex-end
justify-content: center
justify-content: space-between
justify-content: space-around
justify-content: stretch
justify-content: space-evenly

各个属性值所对应的效果如下:
flex-start(默认效果)

.container{
    height: 600px;
    width: 600px;
    justify-content: flex-start;
    ...
}

《CSS之flexbox指南》
flex-end

.container{
    height: 600px;
    width: 600px;
    justify-content: flex-end;
    ...
}

《CSS之flexbox指南》
center

.container{
    height: 600px;
    width: 600px;
    justify-content: center;
    ...
}

《CSS之flexbox指南》

space-between

.container{
    height: 600px;
    width: 600px;
    justify-content: space-between;
    ...
}

《CSS之flexbox指南》
space-between属性值让各个item两边不留边距,而平均分配item之间的空间。P.S:图中最右侧的2px的边距是之前设置的item的右边距。
space-around

.container{
    height: 600px;
    width: 600px;
    justify-content: space-around;
    ...
}

《CSS之flexbox指南》
可以看到,正如around所暗示的,和space-between不同,这次左右两边都有分配空间。而且是子容器沿主轴均匀分布,位于首尾两端的子容器到父容器的距离是子容器间距的一半。
stretch
由于设置了item的宽和高,所以stretch不会生效。
space-evenly

.container{
    height: 600px;
    width: 600px;
    justify-content: space-evenly;
    ...
}

《CSS之flexbox指南》
space-evenly指的是空间的平均分配。

align-items

从上面的例子可以看出,当我们的item横向排布时,justify-content是控制着横方向上的元素对齐方式。
那如果我们希望控制竖方向上item的排列方式应该怎样做能?
这时候就需要用到align-item属性了。
为了便于理解,这次我们只用一个容器和一个item,并且不设置justify-content

html文件:

<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="container">  
            <div class="item">one</div>
        </div>
</html>

css样式

html, body {
    margin: 0;
    padding: 0;
}

.container{
    height: 600px;
    width: 100px;
    margin-top: 20px;
    margin-left: 20px;
    display: flex;
    border: 1px dotted black;
    flex-direction: row;
}

.item{
    height: 50px;
    width: 50px;
    background-color: #666;
}

效果如下图:

《CSS之flexbox指南》
可以看到,在交叉轴(这种情况下也就是我们常说的纵轴)上,item默认的排布也是flex-start
align-items可以取的值也和justify-content类似:
align-items: flex-start
align-items: flex-end
align-items: center
align-items: stretch
align-items: baseline

flex-start(默认值)

.container{
    height: 600px;
    width: 100px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    ...
}

效果如上图所示。
flex-end

.container{
    height: 600px;
    width: 100px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    ...
}

《CSS之flexbox指南》
flex-center

.container{
    height: 600px;
    width: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    ...
}

《CSS之flexbox指南》
stretch
同理,由于已经设置了item的宽和高,所以stretch不会产生拉伸效果。

.container{
    height: 600px;
    width: 100px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    ...
}

《CSS之flexbox指南》
base-line
为了表现基线对齐,我们用到了三个item,效果如图:

《CSS之flexbox指南》

这三个item等宽,高度分别为60px,80px,100px。而且都通过<br>让文字向下换了一行。他们在交叉轴上仍然是基线对齐的。这里的baseline默认是指首行文字的基线。

同时使用justify-content和align-items属性

这就好像平面直角坐标系用横坐标和纵坐标定位一个点一样,我们可以同时使用这两个属性来定位一个item在容器中的位置。
比如,我们想让一个item定位到容器的中间。
就可以这样写:

《CSS之flexbox指南》

又比如,想要让三个item在box的中轴线上分布,而且它们之间的空间相等:

《CSS之flexbox指南》
可以看到,这里我们通过justify-content:space-between令这三个item之间的空间相等。又通过aling-items:center令他们在交叉轴方向上处于中间。

flex-direction: column时的item排布

此时item排布的原理与flex-direction:row时是一致的。
只不过这次主轴换到了竖直方向,而交叉轴换到了水平方向。
根据上面我们讲到的原理,我们不妨试举一例。
比如,有竖直排布的三个item,我们希望它们可以实现如下图所示的设计:

《CSS之flexbox指南》
就可以这样设置我们的css样式:

.box {
  height:300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

通过justify-content: flex-end我们实现了让这三个item排布到主轴(这种情况下是竖直方向这个轴)的尾端(end);
再通过align-items: center我们实现了让这三个item排布到交叉轴(这种情况下是横向的这个轴)的中间。
综合起来,就形成了这样一个布局。

关于start和end

简单起见,我们可以直接将start理解为坐标系原点所在的方位,而end则是坐标轴的箭头所指向的无限远的方向。
需要指出的是,对于从左往右的书写模式,比如汉语、英语等,start可以理解为left,end可以理解为right,而对于从右往左的书写模式,比如阿拉伯语,则有,start可以理解为right,end可以理解为left。

align-self

当我们为一个box容器设置了align-itemsjustify-content属性之后,这套约束的规则将对其中的所有item都适用。
可是如果我们不希望某一个item被这套规则约束怎么办呢?
这时候align-self就派上用场了。
align-self属性可以取align-items属性的所有值。
比如,在上面的例子中,如果我们把3 号item的align-self值设置为:align-self:flex-end;,则有:

《CSS之flexbox指南》

这就相当于3号item宣告天下,它不接受通过align-items设置的规则,而是要设置自己的规则,这也是为什么align-self可以取的值和align-items一模一样。

align-content

到目前为止,我们讨论了在flex容器内单个或多个容器的排布问题。如果我们有一个flex容器,并且其中的item占据了多行,这时候我们可以用到align-content属性,来控制行与行之间的空间分布。

align-content要发挥作用,需要容器的高度比各行item的总高度之和要高。

align-content属性可以取的值如下:
align-content: flex-start
align-content: flex-end
align-content: center
align-content: space-between
align-content: space-around
align-content: stretch
align-content: space-evenly
比如,当align-contentflex-end时,有:

《CSS之flexbox指南》

这些属性值与之前提到的功能一致,不再赘述。

    原文作者:醉过方知酒有权
    原文地址: https://segmentfault.com/a/1190000019889901
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞