前言：
当前同学们对“html圆形盒子”大体比较关注，看官们都想要分析一些“html圆形盒子”的相关知识。那么小编也在网摘上搜集了一些对于“html圆形盒子””的相关文章，希望我们能喜欢，小伙伴们快快来学习一下吧！（1）flex-direction 属性：
flex-direction 属性指定了弹性子元素在父容器中的排列方向和顺序。
其语法格式为：
flex-direction: row | row-reverse | column | column-reverse;
其属性值的意义如下所示：
属性值
描述
row
横向从左到右排列（左对齐），默认的排列方式。
row-reverse
反转横向排列（右对齐），从后往前排，最后一项排在最前面。
column
纵向排列
column-reverse
反转纵向排列，从后往前排，最后一项排在最上面。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .content{ width:200px; height:200px; border:1px solid #C3C3C3; display:flex; } .content2{ flex-direction: row-reverse;/*行对齐，主轴起点与终点相反*/ } .content3{ flex-direction: column;/*列对齐，主轴起点与终点相同*/ } .content4{ flex-direction: column-reverse;/*列对齐，主轴起点与终点相反*/ } .box{ width:50px; height:50px; color:black; } </style></head><body> <div class="content content1"> <div class="box" style="background-color:#FFE5B9;">A</div> <div class="box" style="background-color:#EFF8FF;">B</div> <div class="box" style="background-color:#C9CBFF;">C</div> </div> <div class="content content2"> <div class="box" style="background-color:#FFE5B9;">A</div> <div class="box" style="background-color:#EFF8FF;">B</div> <div class="box" style="background-color:#C9CBFF;">C</div> </div> <div class="content content3"> <div class="box" style="background-color:#FFE5B9;">A</div> <div class="box" style="background-color:#EFF8FF;">B</div> <div class="box" style="background-color:#C9CBFF;">C</div> </div> <div class="content content4"> <div class="box" style="background-color:#FFE5B9;">A</div> <div class="box" style="background-color:#EFF8FF;">B</div> <div class="box" style="background-color:#C9CBFF;">C</div> </div></body></html>flex-direction指定了弹性子元素在父容器中的排列方向和顺序
（2）flex-wrap 属性：
flex-wrap 属性用于指定弹性盒子的子元素换行方式。
其语法格式为：
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
其属性值的意义如下所示：
属性值
描述
nowrap
默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap
弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行。
wrap-reverse
反转 wrap 排列。
<!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> div { width: 100px; height: 100px; color: black; } #content { width: 240px; height: 300px; background-color: white; display: flex; flex-wrap: wrap-reverse; } .item1 { background-color: #ffe5b9; } .item2 { background-color: #eff8ff; } .item3 { background-color: #c9cbff; } </style> </head> <body> <div id="content"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> </div> </body></html>flex-wrap指定弹性盒子子元素换行方式
（3）align-items 属性：
align-items 属性是用来设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
其语法格式为：
align-items: flex-start | flex-end | center | baseline | stretch;
其属性值的意义如下所示：
属性值
描述
flex-start
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center
弹性盒子元素在该行的侧轴（纵轴）上居中放置。
baseline
如弹性盒子元素的行内轴与侧轴为同一条，则该值与 flex-start 等效。其它情况下，该值将参与基线对齐。
stretch
如果指定侧轴大小的属性值为 auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照 min/max-width/height 属性的限制。
<!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> div { width: 100px; color: black; } #content { width: 240px; height: 300px; background-color: white; display: flex; align-items: stretch; } .item1 { background-color: #ffe5b9; } .item2 { background-color: #eff8ff; } .item3 { background-color: #c9cbff; } </style> </head> <body> <div id="content"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> </div> </body></html>flex-items设置或检索弹性盒子元素在轴上对齐方式
（4）align-content 属性：
align-content 控制多行对齐方式，若只有一行则不起作用。
其语法格式为：
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
其属性值的意义为：
属性值
描述
stretch
默认。各行将会伸展以占用剩余的空间。
flex-start
各行向弹性盒容器的起始位置堆叠。
flex-end
各行向弹性盒容器的结束位置堆叠。
center
各行向弹性盒容器的中间位置堆叠。
space-between
各行在弹性盒容器中平均分布。
space-around
各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
<!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> div { width: 60px; color: black; } #content { width: 300px; height: 300px; background-color: antiquewhite; display: flex; flex-wrap: wrap; align-content: stretch; } .left { background-color: gray; } .center { background-color: silver; } .right { background-color: darkgray; } </style> </head> <body> <div id="content"> <div class="left">div1块</div> <div class="center">div2块</div> <div class="right">div3块</div> <div class="left">div4块</div> <div class="center">div5块</div> <div class="right">div6块</div> <div class="left">div7块</div> <div class="center">div8块</div> <div class="right">div9块</div> <div class="left">div10块</div> <div class="center">div11块</div> <div class="right">div12块</div> </div> </body></html>...#content { width: 300px; height: 300px; background-color: antiquewhite; display: flex; flex-wrap: wrap; align-content: flex-start;/*各行向弹性盒容器的起始位置堆叠*/ } ...... #content { width: 300px; height: 300px; background-color: antiquewhite; display: flex; flex-wrap: wrap; align-content: flex-end;/*各行向弹性盒容器的结束位置堆叠*/ }...... #content { width: 300px; height: 300px; background-color: antiquewhite; display: flex; flex-wrap: wrap; align-content: center;/*各行向弹性盒容器的中间位置堆叠*/ }...... #content { width: 300px; height: 300px; background-color: antiquewhite; display: flex; flex-wrap: wrap; align-content: space-between;/*各行在弹性盒容器中平均分布*/ }... #content { width: 300px; height: 300px; background-color: antiquewhite; display: flex; flex-wrap: wrap; align-content: space-around;/*各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半*/ }align-content控制多行对齐方式
练习一下：在 body 中有两对带有 id 选择器的 div 标签，分别为 container 和 content。id 选择器名为 container 的 div 标签在页面上显示为一个长和宽为 200 个像素的带边框的正方形，并设置它的子元素居中排布。id 选择器名为 content 的 div 标签是它的子元素，在页面上呈正圆形显示在正方形边框的中部。
完成代码，看到如下效果：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #container{ width:200px; height:200px; align-items:center; border-color:aquamarine; border:2px solid; display:flex; justify-content:center; } #content{ width:100px; height:100px; border-radius:100%; background-color:rgb(125, 153, 253); } </style></head><body> <div id="container"> <div id="content"></div> </div></body></html> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #html圆形盒子
