CSS Flexbox
flex box各种属性总结
如果不想详细看各种例子可以直接看这篇:css flex容器属性总结
使用显示:可弯曲以定位两个框
使用交替的质询样式来展示如何使用CSS灵活地定位元素。
将CSS属性display: flex;
放在元素上可让您使用其他flex
属性来构建响应页面。
Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
#box-container {
height: 500px;
display:flex;
}
使用flex-direction属性创建一行
添加display: flex
到元素会将其变成flex
容器。这样就可以将该元素的所有子元素对齐到行或列中。您可以通过将flex-direction
属性添加到父项并将其设置为行或列来完成此操作。创建一行将使子代水平对齐,创建一列将使子代垂直对齐。
其他选项flex-direction
是row-reverse
和column-reverse
。
注意:该flex-direction
属性的默认值为row
。
#box-container {
display: flex;
height: 500px;
flex-direction:row-reverse;
}
- 将flex-direction属性应用于在Tweet嵌入中创建行
footer {
display: flex;
flex-direction:row;
}
- 使用flex-direction属性创建列
#box-container {
display: flex;
height: 500px;
flex-direction:column;
}
使用justify-content属性对齐元素
有时,伸缩容器中的伸缩项不会填充容器中的所有空间。通常要告诉CSS如何以某种方式对齐和间隔flex
项目。幸运的是,该justify-content
属性有几个选项可以执行此操作。但是首先,在审查这些选项之前,需要了解一些重要的术语。
这是有用的图像,其中显示了一行以说明以下概念。
回想一下,将flex
容器设置为一行,将flex
项从左到右并排放置。设置为列的伸缩容器将伸缩项目从上到下垂直放置。对于每种挠性物品的排列方向称为主轴。对于一行,这是一条横穿每一项的水平线。对于一列,主轴是穿过项目的垂直线。
关于如何沿作为主轴线的行间隔弹性项目,有几种选择。最常用的一种是justify-content: center
,它将所有flex
项目与flex
容器内的中心对齐。其他选项包括:
- flex-start:将项目与flex容器的开头对齐。对于一行,这会将项目推到容器的左侧。对于列,这会将项目推到容器的顶部。如果未justify-content指定,则这是默认对齐方式。
- flex-end:将项目与flex容器的末端对齐。对于一行,这会将项目推到容器的右侧。对于列,这会将项目推到容器的底部。
- space-between:将项目与主轴中心对齐,在项目之间放置额外的空间。第一个和最后一个项目被推到flex容器的最边缘。例如,连续将第一个项目靠在容器的左侧,最后一个项目靠在容器的右侧,然后将剩余空间平均分配到其他项目中。
- space-around:类似于space-between但第一个和最后一个项目未锁定到容器的边缘,该空间分布在所有项目周围,在flex容器的两端各占一半的空间。
- space-evenly:在flex项之间平均分配空间,在flex容器的任一端都有一个完整的空间
一个示例有助于说明此属性的作用。将CSS属性添加justify-content到#box-container元素,并为其赋予值center。
#box-container {
background: gray;
display: flex;
height: 500px;
justify-content:center;
}
使用align-items属性对齐元素
该align-items
属性类似于justify-content
。回想一下,该justify-content
属性使弹性项沿主轴对齐。对于行,主轴是一条水平线,对于列,主轴是一条垂直线。
柔性容器还具有与主轴相反的横轴。对于行,交叉轴是垂直的,对于列,交叉轴是水平的。
CSS提供了align-items
使弹性项目沿交叉轴对齐的属性。对于一行,它告诉CSS如何在容器内上下推整行中的项目。对于列,如何在容器内向左或向右推动所有项目。
可用的不同值align-items
包括:
- flex-start:将项目与flex容器的开头对齐。对于行,这会将项目与容器的顶部对齐。对于列,这会将项目对齐到容器的左侧。
- flex-end:将项目与flex容器的末端对齐。对于行,这会将项目与容器的底部对齐。对于列,这使项目在容器的右侧对齐。
- center:将项目与中心对齐。对于行,这将垂直对齐项目(项目上方和下方的等距空间)。对于列,这将使它们水平对齐(项目左右两边的间距相等)。
- stretch:拉伸物品以填充弹性容器。例如,行项目被拉伸以从上到下填充flex容器。如果未align-items指定任何值,则为默认值。
- baseline:将项目与其基准对齐。基线是一个文本概念,可将其视为字母所在的行。
使用flex-wrap属性包装行或列
CSS flexbox
具有一项功能,可将弹性项目拆分为多行(或多列)。默认情况下,弹性容器会将所有弹性项目放在一起。例如,一行将全部在一行上。
但是,使用该flex-wrap
属性会告诉CSS包装项目。这意味着多余的项目会移到新的行或列中。包装发生的断点取决于物品的大小和容器的大小。
CSS还提供了环绕方向的选项:
- nowrap:这是默认设置,不包装项目。
- wrap:如果项目是连续的,则从左到右包装,如果是一列,则是从上到下。
- wrap-reverse:如果项目是连续的,则从右到左包装,如果是一列,则是从下到上。
当前布局的一行有太多的框。将CSS属性添加flex-wrap到#box-container元素,并为其赋予值wrap。
#box-container {
background: gray;
display: flex;
height: 100%;
flex-wrap:wrap;
}
使用flex-shrink属性缩小项目
到目前为止,所有属性都适用于flex容器(flex项的父项)。但是,弹性项目有几个有用的属性。
首先是flex-shrink
。使用时,如果flex容器太小,则允许项目收缩。当父容器的宽度小于其内所有flex
项的组合宽度时,项会收缩。
该
flex-shrink属性将数字作为值。与容器中的其他项目相比,**数字越大,收缩幅度越大**。例如,如果一个项目的
flex-shrink值为
1而另一个项目的
flex-shrink值为
3,则值为
3`的项目将缩小为另一个项目的三倍。
将CSS属性添加flex-shrink
到#box-1
和#box-2
中。给出#box-1
的值1
和#box-2
的值2
。
<style>
#box-container {
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
width: 100%;
height: 200px;
flex-shrink:1;
}
#box-2 {
background-color: orangered;
width: 100%;
height: 200px;
flex-shrink:2;
}
</style>
使用flex-grow属性扩展项目
flex-shrink
相反的是flex-grow
。记得flex-shrink
在容器收缩时控制项目的大小。flex-grow
当父容器展开时,该属性控制项目的大小。
使用上一个挑战中的类似示例,如果一项flex-grow
值为1
,而另一项flex-grow
值为3,则值为3将增长为另一项的三倍。
<style>
#box-container {
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
height: 200px;
flex-grow:1;
}
#box-2 {
background-color: orangered;
height: 200px;
flex-grow:2;
}
</style>
使用flex-basis属性设置项目的初始大小
该flex-basis
属性指定CSS之前用flex-shrink
或调整项目的初始大小flex-grow
。
由使用的单位flex-basis
属性是相同的其他尺寸特性(px,em,%等等)。该值auto
根据内容确定项目的大小。
使用设置盒子的初始尺寸flex-basis
。将CSS属性添加flex-basis
到#box-1
和#box-2
中。给出#box-1
的值10em
和#box-2
的值20em
。
<style>
#box-container {
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
height: 200px;
flex-basis:10em;
}
#box-2 {
background-color: orangered;
height: 200px;
flex-basis:20em;
}
</style>
使用flex速记属性
有一个快捷方式可用于一次设置多个flex
属性的flex-grow
,flex-shrink
和flex-basis
特性都可以通过设置共同flex财产。
例如,flex: 1 0 10px
;将设置项flex-grow: 1
,flex-shrink: 0
和flex-basis: 10px
。
默认属性设置为flex: 0 1 auto
。
使用order属性重新排列项目
该order属性用于告知CSS弹性项目在flex容器中的显示顺序。默认情况下,项目将以与它们在源HTML中相同的顺序出现。该属性将数字作为值,并且可以使用负数。
将CSS属性添加order到#box-1和中#box-2。给出#box-1一个值,2给出#box-2一个值1。
<style>
#box-container {
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
order:2;
height: 200px;
width: 200px;
}
#box-2 {
background-color: orangered;
order:1;
height: 200px;
width: 200px;
}
</style>
使用align-self属性
弹性商品的最终属性为align-self
。此属性使您可以单独调整每个项目的对齐方式,而不必一次全部设置它们。因为使用其他常用的调节技术的CSS属性。这是有用的float
,clear
和vertical-align
不同的值。
align-self
接受与align-items
该align-items
属性相同的值,并将覆盖该属性设置的任何值。