css伸缩布局盒flex属性 display:flex 详解

最新推荐文章于 2024-07-31 12:16:44 发布

我们认识么

最新推荐文章于 2024-07-31 12:16:44 发布

阅读量1.9k

点赞数

分类专栏： css 文章标签： flex css

本文链接：https://blog.csdn.net/ul646691993/article/details/52150868

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

请配合这个网页一起看https://www.10000h.top/flex.html

对于一般需求基本都够用了。

css伸缩布局盒

伸缩布局盒由伸缩容器和伸缩项目组成，首先我们创建一个伸缩容器：

.flex-container {
  display: -webkit-flex;
  display: flex;
}

伸缩项目有如下几个参数：

flex-direction

伸缩流方向，默认为row，写在伸缩容器的css样式中。

row：从左到右，从上到下。
row-reverse: 主轴起点和主轴终点交换。如果书写模式是从左至右，伸缩项目则是从右往左显示。
column: 主轴和侧轴交换。如果书写系统是垂直的，那么伸缩项目也是垂直显示的。
column-reverse: 和 column 一样，但是方向相反。

justify-content

主轴对齐，可能有如下几个值，写在伸缩容器的css样式中。

flex-start (默认)从左到右
flex-end 从右到左
center 主轴剧中对齐
space-between 两侧直接到头，之后按照等间距排列
space-around 两侧没有到头，距离边界大概是间距的一半。

align-items

侧轴对齐，有如下几个值，写在伸缩容器的css样式中。

flex-start (默认) 从上到下
flex-end 从下到上 
center 居中对齐
baseline
stretch

flex-wrap

伸缩行换行,弹性伸缩盒的一个牛逼之处，如果不说明换行，就都挤到一行，如果宽度超了就等比例缩小，甚至连设置
都不管用。

nowrap (默认)
wrap 换行
wrap-reverse  全都倒过来，第一行在最下面

align-content

堆栈伸缩行，对齐的不是伸缩项目，而是是伸缩行，当然，参数也和align-items

stretch (默认)
flex-start
flex-end
center
space-between
space-around

这里说明一下，基本上前几个都是对伸缩项目进行设置，这个是对伸缩行进行设置，也就是说所谓的轴。

flex-flow

伸缩方向与换行，是flex-direction和flex-wrap的缩写。
这里举一个小例子吧：

.flex-container {
-webkit-flex-flow: column nowrap;
flex-flow: column nowrap;
}

order

显示顺序，默认值为0，这个要写在具体的伸缩项目中，如果是负数就会被排到前面，正数就会被排到后面。看一个小例子：

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
    width: 300px;
    height: 240px;
    background-color: Silver;
}

.flex-item {
    background-color: DeepSkyBlue;
    width: 100px;
    height: 100px;
    margin: 5px;
}

.first {
    -webkit-order: -1;
    order: -1
    ;
}

margin

外边距。你应该对margin: auto;的这种用法很熟悉。在伸缩盒中，它也能做同样的事情，但是更加强大。一个 "auto"的 margin 会合并剩余的空间。它可以用来把伸缩项目挤到其他位置。看例子：

<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>


.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-content: center;
    align-content: center;
    width: 300px;
    height: 240px;
    background-color: Silver;
}

.flex-item {
    background-color: DeepSkyBlue;
    width: 50px;
    height: 50px;
    margin: 5px;
}

.flex-item:first-child {
    margin-right: auto;
}

注意：直接用margin:auto可以很方便的实现垂直居中的效果:

<div class="flex-container">
<div class="flex-item">I'm centered!</div>
</div>


.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 300px;
    height: 240px;
    background-color: Silver;
}

.flex-item {
    background-color: DeepSkyBlue;
    width: 100px;
    height: 100px;
    margin: auto;
}

align-self

侧轴对齐,伸缩项目的align-self属性会覆盖该项目的伸缩容器的align-items属性。它的值和align-items一样。

stretch (默认)
flex-start
flex-end
center
baseline 基线对齐，多个伸缩项目相当于串一串这样

flex

伸缩性，有如下几种值：

flex: [number]这个语法指定了一个数字，代表了这个伸缩项目该占用的剩余空间比例。

看个例子：
<div class="flex-container">
<div class="flex-item item1">flex: 2</div>
<div class="flex-item item2">flex: 1</div>
<div class="flex-item item3">flex: 1</div>
</div>

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 300px;
    height: 240px;
    background-color: Silver;}
.flex-item {background-color: DeepSkyBlue;margin: 5px;}
.item1 {-webkit-flex: 2;flex: 2;}
.item2 {-webkit-flex: 1;flex: 1;}
.item3 {-webkit-flex: 1;flex: 1;}



flex: initial 
属性值被设为initial的伸缩项目在有剩余空间的情况下不会有任何变化，
但是在必要的情况下会被收缩。

flex: auto 相当于flex:1 现在这个已经无效。

flex: none 在任何情况下都不收缩。

visibility

叠加项目，当该值生效时，应用visibility: collapse;和visibility: hidden;与display: none;的效果是不一样的。如果是collapse，该元素会影响伸缩容器的侧轴长度，但不会被现实或占用主轴的空间。如果你想动态添加或移除伸缩项目又不会影响伸缩容器的侧轴长度，这将会非常有用。
目前为止，visibility: collapse;还没有被让任何浏览器正确的实现。现在visibility: collapse;还和visibility: hidden;实现着一样的效果。希望能尽快得到改观。