大家好，欢迎来到IT知识分享网。
一、弹性盒子定义
弹性盒子是CSS3的一种新的布局模式
CSS3弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式
引入弹性盒布局模型的目的是提供一种更有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
二、CSS3弹性盒内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成弹性容器通过设置display属性的值为flex将其定义为弹性容器弹性容器内包含了一个或多个弹性子元素
它主要是在一个大的容器当中里面子元素的一个设置。一个大的盒子里面里面的子元素如何排列由我们的弹性盒子控制。
注意: 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局
1.不使用display：flex；弹性盒子和使用display：flex；弹性盒子的对比
css
<style> .container { /* display: flex;*/ background-color: gray; width: 500px; height: 500px; } .box1 { background-color: red; width: 100px; height: 100px; } .box2 { background-color: blue; width: 100px; height: 100px; } .box3 { background-color: yellow; width: 100px; height: 100px; } </style>HTML
<body> <div class="container"> <div class="box1">盒子1</div> <div class="box2">盒子2</div> <div class="box3">盒子3</div> </div> </body>这是使用display：flex；的布局
2.flex-direction 属性指定单行元素在父容器中的排列方式。
flex-direction的值有:
- row：横向从左到右排列（左对齐），默认的排列方式。
- row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
- column：纵向排列。
- column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
HTML
<body> <div id="main"> <div class="row"> <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div> </div> <div class="row_reverse"> <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div> </div> <div class="column"> <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div> </div> <div class="column_reverse"> <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div> </div> </div> </body>css
<style> #main { border: 1px solid #CCC; padding: 5px; position: relative; } .row, .row_reverse, .column, .column_reverse{ display: flex; margin-bottom: 5px; } .row { flex-direction: row; } .row div { background-color: aqua; width: 50px; height: 50px; border: 1px solid black; } .row_reverse { flex-direction: row-reverse; } .row_reverse div { background-color: burlywood; width: 50px; height: 50px; border: 1px solid black; } .column { flex-direction: column; } .column div { background-color: yellow; width: 50px; height: 50px; border: 1px solid black; } .column_reverse { flex-direction: column-reverse; position: absolute; top: 120px; left: 400px; } .column_reverse div { background-color: green; width: 50px; height: 50px; border: 1px solid black; } </style>运行示例图
2 、flex-wrap 属性用来设置当弹性盒子的子元素（项目）超出父容器时是否换行
flex-wrap 的值有：
1.nowrap：默认值 项目不会换行，容器为单行，子项可能会溢出容器。
2.wrap：容器为多行，子项溢出的部分会被放置到新的行。
3.wrap_reverse: 项目在需要时换行，但会以相反的顺序排列
HTML
<body> <div id="main"> <div class="nowrap"> <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div> </div> <div class="wrap"> <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div> </div> <div class="wrap_reverse"> <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div> </div> </div> </body>css
<style> #main { border: 1px solid #CCC; padding: 5px; } .nowrap, .wrap, .wrap_reverse { display: flex; flex-direction: row; margin-bottom: 15px; } .nowrap { flex-wrap: nowrap; } .nowrap div { width: 70px; height: 50px; border: 1px solid black; background-color: aqua; } .wrap { flex-wrap: wrap; } .wrap div { width: 70px; height: 50px; border: 1px solid black; background-color: burlywood; } .wrap_reverse { flex-wrap: wrap-reverse; } .wrap_reverse div { width: 70px; height: 50px; border: 1px solid black; background-color: cadetblue; } </style>运行示例图
3.flex-flow：属性是 flex-direction 和 flex-wrap 两个属性的简写
flex-flow：flex-direction flex-wrap；
HTML
<body> <div class="flex_flow"> <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span> </div> </body>css
<style> .flex_flow { display: flex; flex-flow: row-reverse wrap; } .flex_flow span { width: 60px; height: 60px; margin-bottom: 5px; border: 1px solid black; background-color: rgb(165, 235, 211); } </style>运行示例图
4.justify-content：属性用于设置弹性盒子中元素在主轴方向上的对齐方式
justify-content的值有：
1.flex-start：默认值，靠左对齐 依次紧挨着平铺
2.flex-end：靠右对齐 依次紧挨着平铺
3.center: 居中
4. space-between: 两端对齐 每个项目之间的间隔是相等的
5.space-around: 每个项目两侧的间隔相等
HTML
<body> <div class="flex flex-start"> <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span> </div> <div class="flex flex-end"> <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span> </div> <div class="flex center"> <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span> </div> <div class="flex space-between"> <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span> </div> <div class="flex space-around"> <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span> </div> </body>css
<style> .flex { display: flex; flex-flow: row wrap; margin-top: 10px; } .flex span { width: 60px; height: 60px; margin-bottom: 5px; border: 1px solid black; } .flex-start { justify-content: flex-start; } .flex-start span{ background-color: red; width: 60px; height: 60px; } .flex-end { justify-content: flex-end; } .flex-end span{ background-color: rgb(90, 90, 129); width: 60px; height: 60px; } .center { justify-content: center; } .center span{ background-color: rgb(161, 83, 83); width: 60px; height: 60px; } .space-between { justify-content: space-between; } .space-between span{ background-color: rgb(74, 138, 119); width: 60px; height: 60px; } .space-around { justify-content: space-around; } .space-around span{ background-color: rgb(179, 171, 68); width: 60px; height: 60px; } </style>运行示例图
5.align-items： 属性用来设置弹性盒子中元素在纵轴方向上的对齐方式
align-items的值有：
1.stretch：默认值 将项目拉伸与容器相合适
2.center: 位于容器的中间，
3.flex-start:位于容器的顶部，纵轴起始位置的边界紧靠住该行的侧轴起始边界
4.flex-end:位于容器的底部，纵轴起始位置的边界紧靠住该行的侧轴结束边界
5.baseline: 项目与容器的基本线对齐，
HTML
例： <body> <div id="main"> <div class="baseline"><!--更改属性名就可以了 --> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div> <div class="box5">5</div> </div> </div> </body>css
例： <style> #main { border: 1px solid #CCC; padding: 5px; } .baseline { align-items: baseline; display: flex; width: 100%; height: 100px } .baseline .box1 { display: flex; background-color: #f00; width: 100px; border: 1px solid #000; } .baseline .box2 { background-color: #0f0; width: 100px; border: 1px solid #000; font-size: 33px; } .baseline .box3 { background-color: #00f; width: 100px; height: 53px; border: 1px solid #000; } .baseline .box4 { background-color: #ff0; width: 100px; border: 1px solid #000; font-size: 25px; } .baseline .box5 { background-color: #0ff; width: 100px; border: 1px solid #000; } </style>效果运行示例图
6.css3弹性盒子常用属性
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/120777.html
