博主微信:jiayou321xiaoyu 加微信,备注:前端Tree

flex布局、弹性布局之参数用法大详解

HTML5+CSS3 admin 424℃ 0评论

简介 :flex布局, 又叫做伸缩布局, 弹性布局, 弹性盒子 其实都是指的是同一个东西

Flex是Flexible Box的缩写,翻译成中文就是“弹性盒子”,用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局

CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。

当给一个盒子设置了display:flex之后,这个盒子就有了主轴 和侧轴 的概念。 主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向 侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的 方向:默认主轴从左向右 ,默认侧轴从上到下

一 、display 属性

我们在编写css的时候,有的时候经常会使用display这个属性。

1. block 转成块级 独占一整行, 可以设置宽高
2. inline 转成行内 一行可以多个, 不能设宽高
3. inline-block 转成行内块 一行可以多个, 可以设置宽高
4. none 隐藏
5. flex 让容器成为一个伸缩盒子

以上就是display的属性值,本篇文章主要就是用来讲解flex属性的用法

当我们给一个盒子设置了display: flex之后,该盒子就成为了一个伸缩盒子也叫做弹性盒子,拥有了主轴和侧轴的概念, 子盒子会在主轴方向从左往右布局。

二、flex-direction

这个属性是用来调整主轴的对其方式,默认的对其方式为水平方向,一般都不调整

属性可选值 :

row:主轴方向为水平向右
column:主轴方向为竖直向下
row-reverse:主轴方向为水平向左
column-reverse:主轴方向是竖直向上。

三、justify-content(重点)

这个属性的作用是控制主轴的对其方式,就就类似于左对齐、右对齐、居中对起。可以想象成默认的水平对起方式

可选参数 :

flex-start: 弹性盒子元素将向起始位置对齐
flex-end: 弹性盒子元素将向结束位置对齐。
center: 弹性盒子元素将向行中间位置对齐
space-around: 弹性盒子元素会平均地分布在行里
space-between:第一个贴左边,最后一个贴右边,其他盒子均分,保证每个盒子之间的空隙是相等的。
space-evenly(新增属性)  将所有空间平均分配, 兼容性问题比较大,一般不怎么用

四、align-items (重点)

这个属性的作用是用来调整侧轴的对其方式 — 可以想象成为竖直方向的对其方式

可选参数为 :

flex-start: 元素在侧轴的起始位置对其。 
flex-end: 元素在侧轴的结束位置对其。
center: 元素在侧轴上居中对其。
stretch: 元素的高度会被拉伸到最大(注:不能设置高度)。

五、flex-wrap

这个属性的作用是控制flex容器是单行或者多行,默认不换行

可选参数 :

nowrap: 不换行(默认),会压缩子盒子的宽度。
wrap: 当宽度不够的时候,会换行。

六、align-content

这个属性是用来设置多行的flex的排列方式

flex-start: 各行向侧轴的起始位置堆叠。 
flex-end: 各行向弹性盒容器的结束位置堆叠。
center: 各行向弹性盒容器的中间位置堆叠。
space-between: 第一行贴上边,最后一个行贴下边,其他行在弹性盒容器中平均分布。
space-around:  各行在侧轴中平均分布。
space-evenly:   让空间平均分配 
stretch:拉伸,不设置高度的情况下。

七、align-items与align-content的区别

align-items调整的是侧轴的对其方式,不换行一般用align-items
align-content:必须是多行才生效,如果单行,没有效果。换行了就用align-content。

八、给子元素设置样式

上述介绍的属性都是给容器设置样式,其作用是对子元素进行排列的。

下面写的属性一般是作用于子元素本身

1、flex属性

这个属性的作用是用于给子元素分配主轴的空间

例如 : flex : 1

2、order属性

order属性定义项目的排列顺序,项目越小,排列越靠前,默认为1.

例如 :order:1

3、align-self属性

这个属性也是用于设置侧轴的位置,但是align-self用于给子元素设置,优先级比align-items的优先级高。

取值为:

flex-start: 元素在侧轴的起始位置对其。 
flex-end: 元素在侧轴的结束位置对其。
center: 元素在侧轴上居中对其。
stretch: 元素的高度会被拉伸到最大(不能给死高度)。

转载请注明:前端Tree » flex布局、弹性布局之参数用法大详解

喜欢 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址