当前位置: 首页>前端>正文

哪个可以改变容器布局 改变容器的布局

CSS 弹性盒子布局定义了一种针对用户界面设计而优化的 CSS 盒子模型。

在弹性布局模型中,弹性容器的子元素可以在任何方向上排布,也可以“弹性伸缩”其尺寸,既可以增加尺寸以填满未使用的空间,也可以收缩尺寸以避免从父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。

在 flex 容器中默认存在两条轴,水平主轴(main axis) 和垂直的交叉轴(cross axis),这是默认的设置,但是可以更改,所以不能一概认为宽度就是主轴,垂直就是侧轴,需要根据 flex-direction 来判断。 在 flex 容器中的每个子元素被称为 flex item 占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。 如下图:

哪个可以改变容器布局 改变容器的布局,哪个可以改变容器布局 改变容器的布局_css3,第1张

一、flex 容器

实现 flex 布局首先指定一个容器。

.container {
    display: flex; //块级盒子
}
.container {
    display: inline-flex; //行内盒子
}

注意: 容器设置 flex 布局后,子元素的 float 、clear 、vertical-align 属性将会失效。 


二、设置在容器上的属性

  1. flex-direction
  2. flex-wrap
  3. flex-flow
  4. justify-content
  5. align-items
  6. align-content

1、flex-direction: 决定主轴的方向(即元素的排列方向)

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

属性值

描述

row(默认)

指定主轴水平, 子元素从左至右排列   ➜

row-reverse

指定主轴水平,子元素从右向左排列 ⬅︎

column

指定主轴垂直,子元素从上至下排列 ⬇︎

column-reverse

指定主轴垂直,子元素从下往上排列 ⬆︎

2、flex-wrap:决定容器内子元素是否可换行

.container {
    flex-wrap: no-wrap | wrap | wrap-reverse;
}

属性值

描述

no-wrap

(默认值)

默认不换行,即当主轴尺寸固定时,若空间不足时,元素尺寸会随之调整(缩小),并不会挤到下一行。

wrap

正常换行

wrap-reverse

换行,第一行在下方

3、flex-flow:  flex-direction 和 flex-wrap 的简写形式

.container {
    flex-flow: <flex-direction> || <flex-wrap>;
}
默认值为: row nowrap

4、justify-content: 定义了子元素在主轴上的对齐方式

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

属性值

描述

flex-start

子元素起始位置与 main start 位置对齐

flex-end

子元素末尾位置与 main end 位置对齐

center

在主轴方向居中于容器

space-between

两端对齐,元素之间的间隔相等,即剩余空间等分成间隙

space-around

每个元素两侧的间隔相等,所以元素之间的间隔比元素与边缘的间隔大一倍

5、align-items: 定义了子元素在交叉轴上的对齐方式

.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

属性值

描述

flex-start

子元素起始位置与 cross start 位置对齐

flex-end

子元素末尾位置与 cross end 位置对齐

center

在交叉轴方向居中于容器

baseline

第一行文字的基线对齐

stretch(默认)

高度未定(或 auto)时, 将占满容器的高度

6、align-content: 定义了多根轴线的对齐方式,如果元素只有一根轴线,那么该属性将不起作用

.container {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

当 flex-wrap 设置为 nowrap 的时候,容器仅存在一根轴线,因为元素不会换行,就不会产生多条轴线。

当 flex-wrap 设置为 wrap 的时候,容器可能会出现多条轴线,这时候就需要去设置多条轴线之间的对齐方式了。

属性值

描述

flex-start

顶部与 cross start 位置对齐

flex-end

底部与 cross end 位置对齐

center

在交叉轴方向居中于容器

space-between

与交叉轴两端对齐, 间隔全部相等

space-around

每个轴线两侧的间隔相等,所以轴线之间的间隔是轴线与边缘间隔的2倍

stretch

多根主轴上的子元素充满交叉轴



https://www.xamrdz.com/web/2r21931376.html

相关文章: