css 弹性布局-CSS3 柔性袋布局

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

Flexbag 是 CSS3 中的一种新的布局模式。

CSS3FlexibleBox（FlexibleBox或flexbox）是一种布局形式，当页面需要适应不同的屏幕尺寸和设备类型时，可以确保元素的正确行为。 引入 Flexbox 布局模型的目的是提供一种越来越有效的方法来在容器内的子元素之间排列、对齐和分布空白。

简单来说，弹性包布局就是为了适应所有设备。 当使用之前的像素（px）方式进行布局时，在这款笔记本上其实是没有问题的，但是如果你更换了显示器，或者更换了不同屏幕尺寸的设备，整个页面布局就被破坏了。 使用bag布局来约束各个部分所占空间的比例，并设置最小压缩量，这样当屏幕扩展或压缩时，各个组件也会相应地扩展或压缩，保证了布局的一致性。

柔性袋由柔性容器和柔性物品组成。

Flex容器通过将display属性设置为flex或inline-flex来定义为Flex容器。

Flex 容器包含一个或多个 Flex 子元素。

注意：flex容器的外部和flex子元素的内部都正常渲染。 Flex 包仅定义 Flex 子元素在 Flex 容器内的布局方式。

Flex 子元素通常显示在 Flex 包内的一行上。 默认情况下，每个容器只有一行。

弹性袋常用属性flex-direction：指定弹性容器中子元素的排列方式。 如果该元素不是弹性盒对象的元素，则 flex-direction 属性将不起作用。 属性值：

flex-wrap：设置弹力袋子元素超出父容器时是否换行

flex-wrap 属性指定flex容器是单行还是多行，垂直轴的方向决定新行堆叠的方向。

属性值：

flex-flow：flex-direction 和 flex-wrap 的缩写

flex-flow属性是flex-direction属性和flex-wrap属性的缩写，默认值为row nowrap

align-items：设置弹性包元素在横轴（纵轴）方向的对齐方式

align-items 属性定义了 Flex 项目如何沿着 Flex 容器当前行的横向（垂直）轴对齐。

属性值：

align-content：修改flex-wrap属性的行为，与align-items类似，但不是设置子元素的对齐方式，而是设置行对齐方式

justify-content：设置弹性包元素在主轴（横轴）方向的对齐方式

justify-content 用于设置或检索弹性袋元素在主（水平）方向上的对齐方法。

属性：

灵活的子元素属性

1.order：设置弹力袋子元素的顺序。 整数值用于定义排序顺序，较小的值排在后面。 可以为负数，默认为 0。

2.flex-grow：设置或获取弹性袋元素的膨胀百分比。

一个数字css 弹性布局，指定该项目相对于其他灵活项目将增加的数量。 默认值为 0。

3.flex-shrink：指定flex元素的收缩规则。 Flex元素只有在默认长度之和小于容器时才会收缩，收缩的大小基于flex-shrink的值。

一个数字，指定该项目相对于其他灵活项目收缩的量。 默认值为 1。

4. flex-basis：用于设置或检索弹性框的flex基值。

指定元素初始厚度的宽度单位或比率。 自动：默认值。 长度等于元素的宽度。

如果项目没有指定宽度，则宽度将由内容决定。

5.flex：设置弹力袋的子元素如何分配空间。

flex 属性用于设置或检索 Flexbox 模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写。

flex-grow：一个数字css 弹性布局，指定项目相对于其他元素的增长量。

flex-shrink：一个数字，指定项目相对于其他元素收缩的量。

flex-basis：项目的厚度。 合法值：“auto”、“inherit”或后跟“%”、“px”、“em”或任何其他宽度单位的数字。

自动：与 1 1 自动相同。

无：与 0 0 auto 相同。

初始值：将此属性设置为其默认值，即 0 1 auto。

继承：继承父元素的属性。

6.align-self：用在弹性子元素上。 覆盖容器的align-items属性。

自动：默认值。 元素继承其父容器的align-items属性。如果没有父容器

“拉紧”。