03-flex-wrap是否换行

简介: 03-flex-wrap是否换行

flex-wrap:运用到父元素上 结合 display: flex;


flex-wrap: wrap; 换行


flex-wrap: nowrap; 不换行


#main {
    width: 300px;
    height: 300px;
    border: 1px solid #c3c3c3;
    display: flex; 
    flex-wrap: nowrap; 默认不换行
}
#main div {
  width: 100px;
}
</style>
<div id="main">
  <div style="background-color:coral;">11</div>
  <div style="background-color:lightblue;">22</div>
  <div style="background-color:pink;">33</div>
  <div style="background-color:olive;">4</div>
</div>
相关文章
|
1月前
|
前端开发
文本对齐[text-align]
文本对齐[text-align]。
17 2
|
10月前
CSS3 flex 布局在 wrap 换行模式下,让中间指定元素换行
CSS3 flex 布局在 wrap 换行模式下,让中间指定元素换行
620 0
|
10月前
CSS3【display: flex;】与【align-content: (wrap 模式下堆栈排列);】的使用
CSS3【display: flex;】与【align-content: (wrap 模式下堆栈排列);】的使用
43 0
|
10月前
CSS3【display: flex;】与【align-items: 侧轴对齐方式;】的使用
CSS3【display: flex;】与【align-items: 侧轴对齐方式;】的使用
45 0
|
9月前
CSS3 【display: flex; 】与【flex-wrap: 换行模式;】的使用
CSS3 【display: flex; 】与【flex-wrap: 换行模式;】的使用
50 0
|
9月前
|
前端开发
CSS3【display: flex;】与【align-content: (wrap 模式下堆栈排列);】的使用
CSS3【display: flex;】与【align-content: (wrap 模式下堆栈排列);】的使用
29 0
|
10月前
CSS3 【display: flex; 】与【flex-wrap: 换行模式;】的使用
CSS3 【display: flex; 】与【flex-wrap: 换行模式;】的使用
75 0
|
前端开发
display:box、display:flex实现多行文本垂直居中
display:box、display:flex实现多行文本垂直居中
218 0
display:box、display:flex实现多行文本垂直居中
html+css实战160-vertical-align-02
html+css实战160-vertical-align-02
86 0
html+css实战159-vertical-align-01
html+css实战159-vertical-align-01
77 0
html+css实战159-vertical-align-01

热门文章

最新文章