box-shadow属性四个值_flex笔记1—

flex是 "Flexible Box" 的缩写，意为弹性布局。使用弹性布局有一个基本的概念，采用flex元素，称之为flex容器(flex container)，简称为“容器”。"容器" 内的所有子元素会自动成为容器成员，称之为称为 Flex 项目(flex item)，简称"项目"。

“容器”和 “项目”各有六个属性，一一列举会很是冗长。所以，这里一个笔记只记一个属性。

如题，这里记录的 “容器”的第一个属性——flex-direction。direction翻译为“方向”。这个属性决定的是“项目”在“容器”中的排列规律。它有四个值，分别是——row(横向排列 (从左到右) )、row-reverse(与row相反(从右到左))、column(竖直排列(从上到下))、column-reverse(与column相反(从下到上))。

现在从代码上和具体表现上展示这个属性和它的值的意义。先写一段HTML代码。

1

2

3

再加上css代码。

.container{ display:flex;}

这样，我们就有了一个带有三个“项目” 的“容器”。然后为容器继续加上flex-direction属性。(这个是默认值，就是即使你没有写，它也会是这个表现形式)

.container{ display:flex; flex-direction:row;}

flex-direction:row;

如上图所示，当flex-direction的值是row的时候，“项目”的排列方式是从左到右的一个排列方式。那么当flex-direction的值是row-reverse的时候呢？

.container{ display:flex; flex-direction:row-reverse;}

flex-direction:row-reverse

我们可以看到排列方式与row相反——从右到左。以上是横向排列的两个值的“项目”的布局展示效果。下面是竖直方向排列的两个值。

.container{ display:flex; flex-direction:column;}

flex-direction:column

如图所示，当flex-direction的值为column时，是一个从上到下的一个竖直方向的排列。column-reverse与之相反。

.container{ display:flex; flex-direction:column-reverse;}

flex-direction:column-reverse

如图，是一个从下到上的一个竖直方向上的排列。

笔记到这里就一目了然了，flex-direction这个容器属性的具体用途可以从上面的四张图片中对号入座。以上

box-shadow属性四个值_flex笔记1——flex-direction属性相关推荐

Position属性四个值：static、fixed、absolute和relative的区别和用法
在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...
vue 计算属性_lt;Vue 源码笔记系列6gt;计算属性 computed 的实现
1. 前言原文发布在语雀: <Vue 源码笔记系列6>计算属性 computed 的实现 · 语雀www.yuque.com 上一章我们已经学习过 watch,这一章就来看一下计算属性 ...
box-shadow属性四个值_重学前端：什么是盒子模型？标准盒子模型有哪些属性和尺寸计算？...
盒模型盒子模型是网页布局的基石.它有边框.外边距.内边距.内容组成. 盒子由上到下依次分为五层,它们自上而下的顺序是: border 边框 content + padding 内容与内边距 back ...
java设置属性的取值范围是多少_jvm-Java系统属性的范围
系统属性的范围至少从阅读Properties方法的API规范后,我无法获得关于是否由JVM的所有实例共享系统属性的答案. 为了找出答案,我编写了两个快速程序,这些程序将使用相同的键但不同的值通过Pr ...
CSS 文本方向 direction属性
对于英文或中文等语言,默认是从左到右.从上到下进行阅读.然而,并非所有语言都是如此,还有许多从右向左阅读的语言,如阿拉伯语和希伯来语等. 于是,CSS2.1引入了 direction属性,用来定义文本 ...
Position属性四个取值用法和区别
Position属性四个取值用法和区别在初学css的过程中常常会碰到设置定位的问题,大多数初学者都是大概明白,如果不好好弄清楚将会给以后的开发带来困难,经过本小菜对其他文章的浏览,自我总结如下: 目 ...
Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...
python修改类的属性值_python 四种方法修改类变量，实例对象调用类方法改变类属性的值，类对象调用类方法改变类属性的值，调用实例方法改变类属性的值，直接修改类属性的值...
三种方法修改类变量,实例对象调用类方法改变类属性的值,类对象调用类方法改变类属性的值,调用实例方法改变类属性的值,类名就是类对象,city就是类变量, #coding=utf-8 class empl ...
属性赋初始值的四种写法--C#6.0新特性
1 介绍在C# 6.0 语法出来前,属性的赋初始值使用get:set:虽然已经相对于最原始的写法简洁了非常多,但是还不够,还不够,还不够...今天刚好一直在想着前几天朋友问我的有关属性赋初始值的问题 ...

box-shadow属性四个值_flex笔记1——flex-direction属性

box-shadow属性四个值_flex笔记1——flex-direction属性相关推荐

最新文章

热门文章