1.flex布局原理

1）flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
当我们为父盒子设为flex布局以后，子元素的float、clear、和vertical-align属性将失效。
2）采用flex布局的元素，称为flex容器，简称"容器"，它的所有子元素自动成为容器成员，称为flex项目（flex item）,简称"项目"。
3）flex布局一定要给父盒子添加display: flex才有效果
总结：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

2.flex布局父项常见属性

flex-direction: 设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap: 设置子元素是否换行
align-items:设置侧轴上的子元素的排列方式（单行）
align-content: 设置侧轴上的子元素的排列方式（多行）
flex-flow: 符合属性，相当于同时设置了flex-direction和flex-wrap
今天我们先学习flex-direction这个属性

flex-direction设置主轴方向

a.主轴与侧轴
在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴
默认主轴方向就是x轴方向，水平向右
默认侧轴方向就是y轴方向，水平向下

b.属性值
flex-direction属性决定主轴的方向
注意：主轴和侧轴是会变的，就看flex-direction设置谁为主轴，剩下的就是侧轴，而我们的子元素是跟着主轴来排列的
(1) flex-direction: row 默认值子元素从左到右排列
Html代码

<body><div><!--在flex布局中所有元素都有高度和宽度，不用再转化了 --><span>1</span><span>2</span><span>3</span><span>4</span></div>
</body>

CSS代码

<style>div {display: flex; /* flex布局中一定要给父元素加这个 */width: 800px;height: 400px;background-color: aquamarine;/* 默认的主轴时x轴，行 row, 那么y轴就是侧轴 *//* 默认元素是跟着主轴来排列的 */flex-direction: row;}div span {width: 150px;height: 75px;background-color: antiquewhite;margin-right: 2px;}</style>

打开浏览器

注意：这里黄盒子之间有空隙是因为我给span标签设置margin-right
(2) flex-direction: row-reverse 子元素从右到左排列
Html代码

<body><div><span>1</span><span>2</span><span>3</span><span>4</span></div>
</body>

CSS代码

<style>div {display: flex;width: 800px;height: 400px;background-color: aquamarine;/*  翻转 */flex-direction: row-reverse; }div span {width: 150px;height: 75px;background-color: antiquewhite;margin-right: 2px;}</style>

打开浏览器

注意：子盒子都反向排列了，1好盒子没有和绿色的盒子边重合是因为我给span标签加了margin-right: 2px;
(3) flex-direction: column 子元素从上到下排列
Html代码

<body><div><span>1</span><span>2</span><span>3</span><span>4</span></div>
</body>

CSS代码

<style>div {display: flex;width: 800px;height: 400px;background-color: aquamarine;/* 我们可以把主轴设置为y轴 column, 那么x轴就成了侧轴 */flex-direction: column }div span {width: 150px;height: 75px;background-color: antiquewhite;margin-right: 2px;}
</style>

打开浏览器

注意：这里黄盒子之间没有空隙是因为我没有给span标签设置margin-bottom
(4) flex- direction: column-reverse 子元素从右到左排列
Html代码

<body><div><span>1</span><span>2</span><span>3</span><span>4</span></div>
</body>

CSS代码

<style>div {display: flex;width: 800px;height: 400px;background-color: aquamarine;/* 翻转 */flex-direction: row-reverse;}div span {width: 150px;height: 75px;background-color: antiquewhite;margin-right: 2px;}
</style>

打开浏览器

注意：子盒子都反向排列了
好了，今天flex布局的flex-direction属性讲完了，明天继续讲flex布局的justify-content属性和align-items属性和align-content属性，希望大家点赞关注哟，多多支持小董，谢谢！

flex布局——flex-direction属性相关推荐

flex布局——flex布局
学习内容: 例如: 体验flex布局 flex布局父项常见属性 justify-content属性 flex-wrap属性 align-items属性 align-content属性 flex-flo ...
css_flex弹性盒模型/flex布局/flex在线可视化工具
文章目录 contents1: content 2: 测试你对flexbox的掌握 flex 模型 flex在线可视化工具(visual guide to css3 flexbox) flex布局 f ...
flex布局 flex布局的主轴对齐方式
认识flex布局 flex布局弹性布局使用flex布局标签之间没有元素之分(块行内行内块) 可以随意设置宽高父元素添加display:flex 弹性容器子元素自动变成弹性盒子(弹性盒子没有 ...
CSS Flex 布局的 flex-direction 属性讲解
flex-direction 设置了主轴,从而定义了弹性项目放置在弹性容器中的方向. Flexbox 是一种单向布局概念,可将弹性项目视为主要以水平行或垂直列布局. .container {flex- ...
flex布局具体的属性字段和属性值
刚刚参加了一次秋招的笔试,其中有一道题目就是要我写出flex的字段和属性值以及他们的作用.这个问题反映了我最近积累知识之后消化不良!!请大家万分注意消化的问题. 具体的flex布局的知识我就不班门弄斧 ...
flex布局 flex全解 flex
一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{displ ...
flex布局的justify-content属性写法注意事项
做项目时候写了个表格,发现在谷歌浏览器看着正常,在别的浏览器(比如360浏览器)看着不正常.正常效果应该是第一列挨着那条垂直分界线. 谷歌浏览器的效果: 360浏览器的效果后来检查了发现我把just ...
html布局属性,hTML之FLEX布局属性
HTML之flex布局 flex布局是什么 flex布局,中文意思为弹性布局,用来为盒模型提供最大的支持,如果靠简单的float,position,很难将页面做的好看.flex灵活性非常的好,任何一个 ...
Flex布局常用的一些属性及解释
记录一下忘记的时候翻一下父项常见属性 flex-direction:设置主轴的方向 justify-content:设置主轴上的子元素排列方式 flex-wrap:设置子元素是否换行 align- ...

flex布局——flex-direction属性

1.flex布局原理

2.flex布局父项常见属性

flex-direction设置主轴方向

flex布局——flex-direction属性相关推荐

最新文章

热门文章