flex布局：6个容器属性与6个项目属性-白龙seo

页面布局的传统解决方案，基于盒状模型，依赖display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

一、flex容器属性

1、flex-flow属性

（1）让弹性盒的元素以相反的顺序显示，且在必要的时候进行拆行。CSS语法flex-flow: flex-direction flex-wrap|initial|inherit;

<!DOCTYPE html>

<html>

<head>

<title>白龙网SEO优化教程</title>

<style>

#main {

width: 200px;

height: 200px;

border: 1px solid #c3c3c3;

display: -webkit-flex; /* Safari */

-webkit-flex-flow: row-reverse wrap; /* Safari 6.1+ */

display: flex;

flex-flow: row-reverse wrap;

}

#main div {

width: 50px;

height: 50px;

}

</style>

</head>

<body>

</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 flex-flow 属性。</p>

<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-flex-flow 属性支持该属性。</p>

</body>

</html>

（2）flex-flow属性是flex-direction和flex-wrap属性的复合属性。

（3）flex-flow属性用于设置或检索弹性盒模型对象的子元素排列方式。

（4）flex-direction属性规定灵活项目的方向。

（5）flex-wrap属性规定灵活项目是否拆行或拆列。

（6）如果元素不是弹性盒对象的元素，则 flex-flow 属性不起作用。

2、flex-direction属性

<!DOCTYPE html>

<html>

<head>

<title>白龙网SEO优化教程</title>

<style>

#main {

width: 400px;

height: 400px;

border: 1px solid #c3c3c3;

display: -webkit-flex; /* Safari */

-webkit-flex-direction: row-reverse; /* Safari 6.1+ */

display: flex;

flex-direction: row-reverse;

}

#main div {

width: 50px;

height: 50px;

}

</style>

</head>

<body>

</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 flex-direction 属性。</p>

<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-flex-direction 属性支持该属性。</p>

</body>

</html>

3、flex-wrap属性

（1）规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。CSS语法flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

<!DOCTYPE html>

<html>

<head>

<title>白龙网SEO优化教程</title>

<style>

#main {

width: 200px;

height: 200px;

border: 1px solid #c3c3c3;

display: -webkit-flex; /* Safari */

-webkit-flex-wrap: wrap; /* Safari 6.1+ */

display: flex;

flex-wrap: wrap;

}

#main div {

width: 50px;

height: 50px;

}

</style>

</head>

<body>

</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 flex-wrap 属性。</p>

<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-flex-wrap 属性支持该属性。</p>

</body>

</html>

4.justify-content属性

（1）定义了项目在主轴上的对齐方式。justify-content: flex-start | flex-end | center | space-between | space-around;

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start（默认值）：左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

<!DOCTYPE html>

<html>

<head>

<title>白龙网SEO优化教程</title>

<style>

#main {

width: 400px;

height: 150px;

border: 1px solid #c3c3c3;

display: -webkit-flex; /* Safari */

-webkit-justify-content: space-between; /* Safari 6.1+ */

display: flex;

justify-content: space-between;

}

#main div {

width: 70px;

height: 70px;

}

</style>

</head>

<body>

</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 justify-content 属性。</p>

<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-justify-content 属性支持该属性。</p>

</body>

</html>

5.align-items属性

（1）定义项目在交叉轴上如何对齐。align-items: flex-start | flex-end | center | baseline | stretch;

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

<!DOCTYPE html>

<html>

<head>

<title>白龙网SEO优化教程</title>

<style>

#main {

width: 420px;

height: 300px;

border: 1px solid black;

display: -webkit-flex; /* Safari */

-webkit-align-items: center; /* Safari 7.0+ */

display: flex;

align-items: center;

}

#main div {

-webkit-flex: 1; /* Safari 6.1+ */

flex: 1;

}

</style>

</head>

<body>

<div style="background-color:lightgreen;">Green div with more content.</div>

</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-items 属性。</p>

<p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-items 属性支持该属性。</p>

</body>

</html>

6.align-content属性

该属性可能取6个值。

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

<!DOCTYPE html>

<html>

<head>

<title>白龙网SEO优化教程</title>

<style>

#main {

width: 70px;

height: 300px;

border: 1px solid #c3c3c3;

display: -webkit-flex;

display: flex;

-webkit-flex-wrap: wrap;

flex-wrap: wrap;

-webkit-align-content: space-between;

align-content: space-between;

}

#main div {

width: 70px;

height: 70px;

}

</style>

</head>

<body>

</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-content 属性。</p>

<p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-content 属性支持该属性。</p>

</body>

</html>

二、flex项目属性

1、CSS flex属性

（1）让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容。语法格式为，flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;例如：

<!DOCTYPE html>

<html>

<head>

<title>白龙网SEO优化教程</title>

<style>

#main

{

width:220px;

height:300px;

border:1px solid black;

display:flex;

}

#main div

{

flex:1;

}

</style>

</head>

<body>

<div style="background-color:lightgreen;">带有更多内容的绿色 div</div>

</div>

<p><b>注意:</b> Internet Explorer 9 及更早版本不支持 flex 属性。</p>

<p><b>注意:</b> Internet Explorer 10 通过 -ms-flex 属性来支持。 IE11 及更新版本完全支持 flex 属性 (不需要 -ms- 前缀)。</p>

<p><b>注意:</b> Safari 6.1 (及更新浏览器) 通过 -webkit-flex 属性支持。</p>

</body>

</html>

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

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

（4）如果元素不是弹性盒模型对象的子元素，则 flex属性不起作用。

2、flex-grow属性

（1）用于设置或检索弹性盒子子元素所占的比例。其语法格式为，flex-grow: number|initial|inherit;

<!DOCTYPE html>

<html>

<head>

<style>

#main {

width: 350px;

height: 100px;

border: 1px solid #c3c3c3;

display: flex;

}

#main div:nth-of-type(1) {flex-grow: 1;}

#main div:nth-of-type(2) {flex-grow: 3;}

#main div:nth-of-type(3) {flex-grow: 1;}

#main div:nth-of-type(4) {flex-grow: 1;}

#main div:nth-of-type(5) {flex-grow: 1;}

</style>

</head>

<body>

</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 flex-grow 属性。</p>

<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-flex-grow 属性支持该属性。</p>

</body>

</html>

3、flex-shrink属性

（1）指定了flex元素的收缩规则。flex元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据flex-shrink的值。其语法格式为，flex-shrink: number|initial|inherit;

如果元素不是弹性盒对象的元素，则flex-shrink属性不起作用。

<!DOCTYPE html>

<html>

<head>

<title>白龙网SEO优化教程</title>

<style>

#content {

display: flex;

width: 500px;

}

#content div {

flex-basis: 200px;

border: 3px solid rgba(0,0,0,.2);

}

.box {

flex-shrink: 1;

}

.box1 {

flex-shrink: 2;

}

</style>

</head>

<body>

<p>div 总宽度为 500px, flex-basic 为 120px。</p>

<p>A, B, C 设置 flex-shrink:1。 D , E 设置为 flex-shrink:2</p>

</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 flex-shrink 属性。</p>

<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-flex-shrink 属性支持该属性。</p>

</body>

</html>

4、flex-basis属性

（1）用于设置或检索弹性盒伸缩基准值。CSS语法为，flex-basis: number|auto|initial|inherit;

<!DOCTYPE html>

<html>

<head>

<title>白龙网SEO优化教程</title>

<style>

#main {

width: 350px;

height: 100px;

border: 1px solid #c3c3c3;

display: -webkit-flex; /* Safari */

display: flex;

}

#main div {

-webkit-flex-grow: 0; /* Safari 6.1+ */

-webkit-flex-shrink: 0; /* Safari 6.1+ */

-webkit-flex-basis: 40px; /* Safari 6.1+ */

flex-grow: 0;

flex-shrink: 0;

flex-basis: 40px;

}

#main div:nth-of-type(2) {

-webkit-flex-basis: 80px; /* Safari 6.1+ */

flex-basis: 80px;

}

</style>

</head>

<body>

</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 flex-basis 属性。</p>

<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-flex-basis 属性支持该属性。</p>

</body>

</html>

5.order属性

定义项目的排列顺序。数值越小，排列越靠前，默认为0。order: <integer>;

<!DOCTYPE html>

<html>

<head>

<title>白龙网SEO优化教程</title>

<style>

#main {

width: 400px;

height: 150px;

border: 1px solid #c3c3c3;

display: -webkit-flex; /* Safari */

display: flex;

}

#main div {

width: 70px;

height: 70px;

}

/* Safari 6.1+ */

div#myRedDIV {-webkit-order: 2;}

div#myBlueDIV {-webkit-order: 4;}

div#myGreenDIV {-webkit-order: 3;}

div#myPinkDIV {-webkit-order: 1;}

/* Standard syntax */

div#myRedDIV {order: 1;}

div#myBlueDIV {order: 2;}

div#myGreenDIV {order: 3;}

div#myPinkDIV {order: 4;}

</style>

</head>

<body>

</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 order 属性。</p>

<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-order 属性支持该属性。</p>

</body>

</html>

6.align-self属性

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

<!DOCTYPE html>

<html>

<head>

<title>白龙网SEO优化教程</title>

<style>

#main {

width: 220px;

height: 300px;

border: 1px solid black;

display: -webkit-flex; /* Safari */

-webkit-align-items: flex-start; /* Safari 7.0+ */

display: flex;

align-items: flex-start;

}

#main div {

-webkit-flex: 1; /* Safari 6.1+ */

flex: 1;

}

#myBlueDiv {

-webkit-align-self: center; /* Safari 7.0+ */

align-self: center;

}

</style>

</head>

<body>

<div style="background-color:lightgreen;">带有更多内容的绿色 div</div>

</div>

<p><b>注意:</b> align-self 属性重写了容器的 align-items 属性。</p>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-items 属性。</p>

<p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-items 属性支持该属性。</p>

</body>

</html>

首页 > web前端技术 > css3 >

flex布局：6个容器属性与6个项目属性

相关推荐

猜您喜欢