一、flex-direction:

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-direction属性：决定主轴的方向（即项目的排列方向）

.box {flex-direction: row | row-reverse | column | column-reverse;
}

例子

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>#box {width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;flex-direction: row-reverse;}#box div {width: 50px;height: 50px;color: white;line-height: 50px;text-align: center;background: red;}</style></head><body><div id="box"><div>1</div><div>2</div><div>3</div></div></body>
</html>

二、flex-wrap:

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

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


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

它可能取三个值。

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

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

三、flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。


.box {flex-flow: <flex-direction> || <flex-wrap>;
}

案例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>#box2 {width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;/* flex-wrap:wrap; flex-direction: row; */flex-flow: row wrap;}#box2 div {width: 50px;height: 50px;color: white;line-height: 50px;text-align: center;background: red;}</style></head><body><div id="box2"><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></body>
</html>

2.flex 容器属性 flex-direction ，flex-wrap ，flex-flow相关推荐

flex容器属性(一)
一,概念 flexible box ,意为"弹性布局",用来为盒状模型提供最大的灵活性. 块级布局更侧重于垂直方向,行内布局更侧重于水平方向,于此相对的,弹性盒子布局算法是方向无关 ...
Flutter: 弹性布局Flex(Expanded)、流式布局Wrap、Flow
用Android原生实现流式布局[实现例如app的很多标签]需要自定义View继承自ViewGroup,然后代码量也不小. 相关自定义View实现流式布局,请参考这位老兄的博客: https://bl ...
flex弹性布局教程-07容器属性flex-direction
本节目标掌握flex-direction的使用. 了解主轴变化的概念. 内容摘要本篇讲解了容器属性 flex-direction,用来设置主轴的方向. 阅读时间大约10~15分钟. flex容器属 ...
Bootstrap4+MySQL前后端综合实训-Day01-PM【position定位的四种方式、Flex布局语法教程及案例(概念、容器属性、项目属性)、双飞翼布局复习、Bootstrap4 教程】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录 HTML中的三种元素(块元素.内联元素.内联块元素) position定位的四种方式 ...
flex布局（flex容器，flex属性）
文章目录前言一.flex(Flexible Box)概述二.flex容器,flex属性 1.flexBox弹性模型 2.基本概念详解 3.弹性容器的属性 4.弹性元素的属性 5.圣杯布局 6.垂 ...
flex弹性布局教程-10容器属性justify-content
本节目标掌握justify-content的基础使用. 掌握项目多列排列使用justify-content对齐的技巧. 内容摘要本篇介绍了容器属性justify-content,用来设置项目在主轴 ...
flex弹性布局教程-12容器属性align-content
本节目标掌握align-content的基础使用. 掌握align-content和justify-content的区别. 掌握align-content和align-items的区别. 内容摘要 ...
CSS中flex弹性盒子——弹性容器属性，弹性元素属性（附图）
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,2009 ...
2、多效果、太极图、党徽和五角星、时钟、animation、文本溢出显示省略号、Flex布局、Flex容器、链接状态、选择器、清除浮动、table表格合并、点击事件、半包围效
2.多效果.太极图.党徽和五角星.时钟.animation.文本溢出显示省略号.Flex布局.Flex容器.链接状态.选择器.清除浮动.table表格合并.点击事件.半包围效.getBoundingC ...

2.flex 容器属性 flex-direction ，flex-wrap ，flex-flow

一、flex-direction:

二、flex-wrap:

三、flex-flow

2.flex 容器属性 flex-direction ，flex-wrap ，flex-flow相关推荐

最新文章

热门文章