flex-wrap容器属性

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

默认情况下，flex项目都会尝试适合一行。您可以更改它并允许项目根据需要使用此属性进行换行。

.container{flex-wrap: nowrap | wrap | wrap-reverse;
}

它可能取三个值。

（1）nowrap（默认）：不换行。
（2）wrap：换行，第一行在上方。
（3）wrap-reverse：换行，第一行在下方。

nowrap（默认）：不换行。

<div class="flex-wrap"><div class="nowrap"><p>我叫flex-warp：nowrap-1</p></div><div class="nowrap"><p>我叫flex-warp：nowrap-2</p></div><div class="nowrap"><p>我叫flex-warp：nowrap-3</p></div><div class="nowrap"><p>我叫flex-warp：nowrap-4</p></div><div class="nowrap"><p>我叫flex-warp：nowrap-5</p></div><div class="nowrap"><p>我叫flex-warp：nowrap-6</p></div></div>

.flex-wrap{display: flex;flex-wrap: nowrap;width: 500px;height: 300px;margin: auto;background-color: red;}.nowrap{width: 130px;height: 180px;border: 1px #000000 solid;background-color: blue;}

wrap：换行，第一行在上方。

  <div class="flex-wrap"><div class="wrap"><p>我叫flex-warp：warp-1</p></div><div class="wrap"><p>我叫flex-warp：warp-2</p></div><div class="wrap"><p>我叫flex-warp：warp-3</p></div><div class="wrap"><p>我叫flex-warp：warp-4</p></div><div class="wrap"><p>我叫flex-warp：warp-5</p></div><div class="wrap"><p>我叫flex-warp：warp-6</p></div></div>

        .flex-wrap{display: flex;display: -webkit-flex;flex-wrap: wrap;width: 650px;height: 300px;margin: auto;background-color: red;}.wrap{width: 150px;height: 100px;border: 1px black solid;background-color: blue;}

wrap-reverse：换行，第一行在下方。

<div class="flex-warp"><div class="warp-reverse"><p>我叫第一个warp-reverse</p></div><div class="warp-reverse"><p>我叫第二个warp-reverse</p></div><div class="warp-reverse"><p>我叫第三个warp-reverse</p></div><div class="warp-reverse"><p>我叫第四个warp-reverse</p></div><div class="warp-reverse"><p>我叫第五个warp-reverse</p></div><div class="warp-reverse"><p>我叫第六个warp-reverse</p></div></div>

.flex-warp{display: flex;display: -webkit-flex;flex-wrap: wrap-reverse;width: 500px;height: 250px;margin: auto;background-color: red;}.warp-reverse{width: 100px;height: 100px;border: 1px black solid;background-color: blue;}

flex-wrap容器属性相关推荐

css flex布局 —— 容器属性 flex-wrap
flex-wrap属性默认情况下,项目都排在一条线(又称"轴线")上.flex-wrap属性定义,如果一条轴线排不下,如何换行. 语法 .box{flex-wrap: nowra ...
css flex布局 —— 容器属性 align-items
align-items 属性定义项目在交叉轴上如何对齐. 语法: .box {align-items: flex-start | flex-end | center | baseline | stre ...
flex弹性布局教程-10容器属性justify-content
本节目标掌握justify-content的基础使用. 掌握项目多列排列使用justify-content对齐的技巧. 内容摘要本篇介绍了容器属性justify-content,用来设置项目在主轴 ...
flex弹性布局教程-12容器属性align-content
本节目标掌握align-content的基础使用. 掌握align-content和justify-content的区别. 掌握align-content和align-items的区别. 内容摘要 ...
flex容器属性(一)
一,概念 flexible box ,意为"弹性布局",用来为盒状模型提供最大的灵活性. 块级布局更侧重于垂直方向,行内布局更侧重于水平方向,于此相对的,弹性盒子布局算法是方向无关 ...
『解疑』flex布局 flex-wrap:wrap 自动换行属性，导致两行div中间有大空行。
问题 flex布局,用了flex-wrap:wrap;自动换行属性后,导致两行div中间有空行.(如下图所示) 解决给外层父元素添加 align-content:flex-start 样式解决后: ...
flex弹性布局教程-07容器属性flex-direction
本节目标掌握flex-direction的使用. 了解主轴变化的概念. 内容摘要本篇讲解了容器属性 flex-direction,用来设置主轴的方向. 阅读时间大约10~15分钟. flex容器属 ...
解决 flex布局之 flex-wrap:wrap 自动换行属性，导致上下两行div中间有空行的问题
这两天写了一个页面发现 flex布局自动换行属性导致上下两行div中间有空行,下面先说现象. 这是中间有空行的现象导致整个页面看起来很难受 ... 通过加了一个属性 align-content ...
弹性盒模型----容器属性
布局的传统方案,基于盒装模型,依赖display属性+position属性+float属性.他对于那些特殊的布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C提出了一种新的方案--Fle ...
Flex弹性布局属性及属性值
1.什么是Flex 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器".它的所有子元素自动成为容器成员,称为 Flex 项目(flex ...

flex-wrap容器属性

flex-wrap容器属性

flex-wrap容器属性相关推荐

最新文章

热门文章