|
|
@@ -0,0 +1,147 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ #box {
|
|
|
+ width: 800px;
|
|
|
+ height: 800px;
|
|
|
+ background: #ccc;
|
|
|
+ /* 开启弹性布局 */
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ /* flex-direction: column; */
|
|
|
+ /* flex-wrap: wrap-reverse; */
|
|
|
+ /* flex-flow: row nowrap; */
|
|
|
+ /* justify-content: flex-end; */
|
|
|
+ /* align-items: baseline; */
|
|
|
+ align-content: stretch;
|
|
|
+ }
|
|
|
+ #box4{
|
|
|
+ width: 100px;
|
|
|
+ height: 50px;
|
|
|
+ background: #00f;
|
|
|
+ }
|
|
|
+ #box5 {
|
|
|
+ width: 120px;
|
|
|
+ height: 100px;
|
|
|
+ background: #0f0;
|
|
|
+ }
|
|
|
+ #box6 {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ background: #f00;
|
|
|
+ }
|
|
|
+ /* #box1,#box2,#box3 {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+ #box1 {
|
|
|
+ background-color: #f00;
|
|
|
+ }
|
|
|
+ #box2 {
|
|
|
+ background-color: #ff0;
|
|
|
+ }
|
|
|
+ #box3 {
|
|
|
+ background-color: #00f;
|
|
|
+ } */
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <!-- 弹性盒子 -->
|
|
|
+ <!--
|
|
|
+ Flex 弹性布局
|
|
|
+ Flex属性分为两部分，一部分作用于容器称""容器属性"",另一部分作用于项目称为""项目属性"";
|
|
|
+ display:flex; 开启弹性盒
|
|
|
+ display:-webkit-flex; 开启对应内核浏览器的弹性盒
|
|
|
+ display:inline-flex; 开启行内的弹性盒
|
|
|
+ 注意:设置为flex布局后，子元素的float、clear、vertical-align属性将失效;
|
|
|
+
|
|
|
+ 容器属性：
|
|
|
+ 1.flex-direction
|
|
|
+ 决定主轴的方向(项目的排列方向)
|
|
|
+ .box {
|
|
|
+ flex-direction:row|row-reverse|column|column-reverse;
|
|
|
+ }
|
|
|
+ row(默认) 从左向右排列,主轴为水平方向，起点在左端
|
|
|
+ row-reverse 从右向左排列,主轴为水平方向,起点在右端
|
|
|
+ column 从上向下排列,起点在上沿
|
|
|
+ column-reverse 从下向上排列,起点在下沿
|
|
|
+ 2.flex-wrap
|
|
|
+ 默认情况下，Flex项目都排在一条线上，又称"轴线"上；
|
|
|
+ 我们可以通过flex-wrap属性设置，让Flex项目换行排列；
|
|
|
+ .box {
|
|
|
+ flex-wrap:nowrap|wrap|warp-reverse;
|
|
|
+ }
|
|
|
+ nowrap(默认):不换行;所有Flex项目单行排列：
|
|
|
+ wrap:换行,第一行在上方;所有Flex项目多行排列,按从上到下的顺序;
|
|
|
+ wrap-reverse:换行,第一行在下方;所有Flex项目多行排列,按从下到上的顺序;
|
|
|
+ 3. flex-flow
|
|
|
+ 是flex-direction属性和flex-wrap属性的间歇性是，默认值为row nowrap;
|
|
|
+ .box {
|
|
|
+ flex-flow:<flex-direction><flex-wrap>;
|
|
|
+ }
|
|
|
+ 4. justify-content属性定义了项目在主轴上的对齐方式;
|
|
|
+ .box {
|
|
|
+ justify-content:flex-start|flex-end|center|space-between|space-around;
|
|
|
+ }
|
|
|
+ flex-start(默认):左对齐;
|
|
|
+ flex-end:右对齐;
|
|
|
+ center:居中;
|
|
|
+ space-between:两端对齐，项目之间间隔相等;
|
|
|
+ space-around：项目均匀分布，每一个项目两侧有相同的留白空间，相邻项目之间的距 离是两个项目之间留白的和;
|
|
|
+ space-evenly：项目均匀分布，所有项目之间及项目与边框之间距离相等;
|
|
|
+ 5. align-items
|
|
|
+ 属性定义项目在交叉轴上的对齐方式。
|
|
|
+ .box {
|
|
|
+ align-items: stretch | flex-start | flex-end | center | baseline;
|
|
|
+ }
|
|
|
+ stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
|
|
|
+ flex-start：交叉轴的起点对齐。
|
|
|
+ flex-end：交叉轴的终点对齐。
|
|
|
+ center：交叉轴的中点对齐。
|
|
|
+ baseline: 项目的第一行文字的基线对齐。
|
|
|
+ 6. align-content
|
|
|
+ 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
|
|
|
+ .box {
|
|
|
+ align-content: flex-start | flex-end | center | space-between | space-around | stretch;
|
|
|
+ }
|
|
|
+ stretch (默认)：拉伸显示
|
|
|
+ flex-start：从启点线开始顺序排列
|
|
|
+ flex-end：相对终点线顺序排列
|
|
|
+ center：居中排列
|
|
|
+ space-between：项目均匀分布，第一项在启点线，最后一项在终点线
|
|
|
+ space-around：项目均匀分布，每一个项目两侧有相同的留白空间，相邻项目之间的距离是两个项目之间留白的和
|
|
|
+
|
|
|
+ 注意: Internet Explorer 10 及更早版本浏览器不支持 align-content 属性。
|
|
|
+ 注意: Safari 7.0 及更新版本通过 -webkit-align-content 属性支持该属性。
|
|
|
+ 注意:Internet Explorer, Firefox, 和 Safari 浏览器不支持 align-content 属性。
|
|
|
+
|
|
|
+ -->
|
|
|
+ <div id="box">
|
|
|
+ <!-- <div id="box1">1</div>
|
|
|
+ <div id="box2">2</div>
|
|
|
+ <div id="box3">3</div> -->
|
|
|
+ <!-- <div id="box1">1</div>
|
|
|
+ <div id="box2">2</div>
|
|
|
+ <div id="box3">3</div>
|
|
|
+ <div id="box1">1</div>
|
|
|
+ <div id="box2">2</div>
|
|
|
+ <div id="box3">3</div> -->
|
|
|
+ <div id="box4"></div>
|
|
|
+ <div id="box5"></div>
|
|
|
+ <div id="box6"></div>
|
|
|
+ <div id="box4"></div>
|
|
|
+ <div id="box5"></div>
|
|
|
+ <div id="box6"></div>
|
|
|
+ <div id="box4"></div>
|
|
|
+ <div id="box5"></div>
|
|
|
+ <div id="box6"></div>
|
|
|
+ <div id="box4"></div>
|
|
|
+ <div id="box5"></div>
|
|
|
+ <div id="box6"></div>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+</html>
|
e