CSS Flexbox使用详解 CSSFlexbox|CSS2

本文概述

CSS3 Flexbox属性
支持的浏览器

CSS3弹性盒也称为CSS Flexbox, 是CSS3中的一种新的布局模式。
CSS3 flexbox用于使元素在不同屏幕尺寸和不同显示设备上使用时具有可预测的行为。它提供了一种更有效的方式来布局, 对齐和分配容器中各个项目之间的空间。
它主要用于使CSS3能够更改其项目的宽度和高度, 以最适合所有可用空间。它优于块模型。
CSS3 flexbox包含flex容器和flex项目。
Flex容器：flex容器指定父级的属性。通过将元素的显示属性设置为flex或inline-flex来声明。
弹性项目：弹性项目指定子项的属性。一个伸缩容器内可能有一个或多个伸缩项目。

文章图片
注意：Flexbox指定如何在flex容器内设置flex项目。它沿着弹性线在弹性容器内设置弹性项目。默认情况下, 每个伸缩容器只有一条伸缩线。在伸缩容器外部和伸缩项目内部的所有内容均视为正常情况。
让我们以一个示例显示一个flex容器中的三个flex项目。默认情况下, 它们沿着水平伸缩线从左到右设置：
请参阅以下示例：

< !DOCTYPE html> < html> < head> < meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> < style> .flex-container { display: -webkit-flex; display: flex; width: 400px; height: 200px; background-color: lightpink; } .flex-item { background-color: brown; width: 100px; height: 100px; margin: 10px; } < /style> < /head> < body> < 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> < /body> < /html>

你还可以通过使用direction属性来更改柔线的方向。如果要从右到左设置方向线, 则将direction属性设置为rtl。
请参阅以下示例：

< !DOCTYPE html> < html> < head> < style> body { direction: rtl; } .flex-container { display: -webkit-flex; display: flex; width: 400px; height: 200px; background-color: lightpink; } .flex-item { background-color: brown; width: 100px; height: 100px; margin: 10px; } < /style> < /head> < body> < 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> < /body> < /html>

CSS3 Flexbox属性 【CSS Flexbox使用详解】以下是CSS3 Flexbox属性的列表：

属性	描述
display	它用于指定用于html元素的框的类型。
flex-direction	它用于指定弹性容器内的弹性项目的方向。
justify-content	当项目未使用主轴上所有可用空间时, 可用于水平对齐弹性项目。
align-items	当柔性物品未在横轴上占用所有可用空间时, 可用于垂直对齐柔性物品。
flex-wrap	它指定伸缩项目是否应该换行, 如果一条伸缩行上没有足够的空间容纳它们。
align-content	它用于修改flex-wrap属性的行为。它与align-items相似, 但是它不是对齐flex项目, 而是对齐flex线。
flex-flow	它为flex-direction和flex-wrap指定了简写属性。
order	它指定了弹性项目相对于同一容器内其余弹性项目的顺序。
align-self	它用于弹性物品。它覆盖了容器的align-items属性。
flex	它指定弹性项目的长度, 相对于同一容器内其余弹性项目的长度。

支持的浏览器

属性	铬	IE浏览器	火狐浏览器	歌剧	苹果浏览器
基本支持（单行flexbox）	29.0 21.0 -webkit-	11.0	22.0 18.0 -moz-	12.1 -webkit-	6.1 -webkit-
multi-line flexbox	29.021.0 -webkit	11.0	28.0	17.0 15.0 -webkit- 12.1	6.1 -webkit-