`flex-wrap`属性

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

语法

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

flex-wrap 取值有三个： nowrap | wrap | wrap-reverse。

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

nowrap

nowrap（默认）：不换行。

实例：

<!DOCTYPE html>
<html>
<head>
<style>
.container {width: 350px;height: 350px;border: 1px solid #c3c3c3;display: flex;display: -webkit-flex; /* Safari */flex-wrap: nowrap;
}
.container div { width:100px;height:50px; }
.container div:nth-of-type(1) {background-color:coral;}
.container div:nth-of-type(2) {background-color:lightblue;}
.container div:nth-of-type(3) {background-color:khaki;}
.container div:nth-of-type(4) {background-color:pink;}
.container div:nth-of-type(5) {background-color:lightgrey;}
.container div:nth-of-type(6) {background-color:orange;}</style>
</head>
<body><div class="container"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>
</div><p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 flex-grow 属性。</p>
<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-flex-grow 属性支持该属性。</p></body>
</html>

页面效果：

wrap

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

实例：

  flex-wrap: wrap;

页面效果：

wrap-reverse

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

实例：

  flex-wrap: wrap-reverse;

页面效果：

css flex布局 —— 容器属性 flex-wrap相关推荐

css flex布局 —— 容器属性 align-items
align-items 属性定义项目在交叉轴上如何对齐. 语法: .box {align-items: flex-start | flex-end | center | baseline | stre ...
CSS常用布局二（flex布局）
flex布局前言:flex是flexible box的缩写,译为"弹性布局",用来为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局,只需要设置"displ ...
前端css弹性布局各种属性
前端css弹性布局各种属性一.基本概念 Flexbox 是 flexible box 的简称(注:意思是"灵活的盒子容器")又叫弹性布局,是 CSS3 引入的新的布局模式.它决定 ...
网页HTML5制作flex布局骰子,css3 flex布局结合transform生成一个3D骰子
1 Flex 布局首先聊聊Flex 布局,Flex 布局又称"弹性布局",任何容器都可以指定为Flex布局,设置Flex布局会使得子元素的float.clear.vertical ...
Flex布局常用属性简介
flex弹性布局 flex布局与传统布局的区别传统布局: 传统布局,基于盒模型,依赖 display属性 .position属性 .float属性,它对于那些特殊布局非常不方便,比如垂直居中. 兼容 ...
Flex 布局 - 容器
版权声明:本文首发 http://asing1elife.com ,转载请注明出处. https://blog.csdn.net/asing1elife/article/details/8286217 ...
flex布局，属性用法
Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. display 指定 HTML 元素盒子类型 ...
flex布局——flex-direction属性
1.flex布局原理 1)flex是flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局. 当我们为父盒子设为fl ...
记录Flex布局的属性
容器属性 flex-dirextion(主轴的方向):>>row(水平) | row-reverse(水平取反) | column(垂直) | column-reverse(垂直取反) f ...

css flex布局 —— 容器属性 flex-wrap

`flex-wrap`属性

语法

nowrap

wrap

wrap-reverse

css flex布局 —— 容器属性 flex-wrap相关推荐

最新文章

热门文章

css flex布局 —— 容器属性 flex-wrap

flex-wrap属性

语法

nowrap

wrap

wrap-reverse

css flex布局 —— 容器属性 flex-wrap相关推荐

最新文章

热门文章

`flex-wrap`属性