css弹性盒模型详解----flex-direction

本篇文章详细介绍flex-direction

 flex-direction 是控制盒模型容器下一级子元素的排列方式的属性 一共有四种row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。

//第一种属性  flex-direction:row  该属性默认存在即创建了盒模型就会是默认这一条  行排列 靠左
<style>.flex-box{display: flex;}.box1{width: 100px;height: 100px;background-color: red;}.box2{width: 100px;height: 100px;background-color: purple;}</style>
<div class="flex-box"><div class="box1"></div><div class="box2"></div>
</div>
效果演示如下： //在演示中可以看出来两个盒子box1和box2 没有浮动 没有定位也没有改变作用域 就在一行显示

//第二种属性 flex-direction: row-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>.flex-box{display: flex;flex-direction: row-reverse;}.box1{width: 100px;height: 100px;background-color: red;}.box2{width: 100px;height: 100px;background-color: purple;}</style>
</head>
<body><div class="flex-box"><div class="box1"></div><div class="box2"></div></div>
</body>
</html>

效果演示如下：

//第三种属性 flex-direction: column：主轴为垂直方向，起点在左端。   列排序 由上向下正常排列<!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>.flex-box{display: flex;flex-direction: column;}.box{width: 100px;height: 100px;background-color: red;margin-bottom: 10px;}</style>
</head>
<body><div class="flex-box"><div class="box">1111111</div><div class="box">222222</div></div>
</body>
</html>

效果演示如下：

//第四种属性 flex-direction: 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>.flex-box{display: flex;flex-direction:column-reverse;}.box{width: 100px;height: 100px;background-color: red;margin-bottom: 10px;color: blue;}</style>
</head>
<body><div class="flex-box"><div class="box">1111111</div><div class="box">222222</div></div>
</body>
</html>

效果演示如下：

css弹性盒模型详解----flex-direction相关推荐

css弹性盒模型详解----flex-wrap
本篇文章详细介绍flex-wrap flex-wrap是控制盒模型容器下一级子元素的在一行显示的时候是否换行nowrap(默认值):不换行wrap:自动换行wrap-reverse:换行,第一行在下方 ...
CSS——弹性盒模型(Flex)
CSS--弹性盒模型前言本文大部分参考自阮一峰老师和B站后盾人的Flex布局教程. 原文地址:
最流行的布局方案 Flex 弹性盒布局详解
Flex布局又称弹性盒布局,是在CSS3中的一种新布局方式,可以简洁.方便.响应式地实现各种页面布局,因此自一提出受到了极大地追捧,目前也得到了各大主流浏览器的支持,因此迅速替代了之前的"d ...
CSS 弹性盒子布局详解
CSS 弹性盒子弹性盒子是CSS3的一种新布局模式.是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 弹性盒子布局是一种在前端HTML开发中比较常用的布局方式,还有 ...
06-CSS盒模型详解
本文最初发表于博客园,并在GitHub上持续更新.以下是正文. 盒子模型前言盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并 ...
CSS弹性盒模型——flex详解
什么是flex 为什么用flex 初识flex flex-主轴方向与换行 flex-direction 例子: <!DOCTYPE html> <html lang="en ...
css3弹性盒模型兼容性,彻底弄懂css3的flex弹性盒模型
由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...
2.HTML、CSS初识盒子模型详解行高理解
什么是语言? 1. 语言是一个沟通工具: 2. 人与人之间的沟通交流我们会用到语言,比如: 汉语.英语-- : 3. 作为前端工程师,要与浏览器沟通交流,就要用到浏览器所能识别的语言. 浏览器 3大语 ...
css弹性盒之justify-content详解
今天没事把css弹性盒常用及要注意的做一下整理: 先上代码如下: <!DOCTYPE html> <html> <head> <meta charset=&q ...

css弹性盒模型详解----flex-direction

本篇文章详细介绍flex-direction

效果演示如下：

效果演示如下：

效果演示如下：

css弹性盒模型详解----flex-direction相关推荐

最新文章

热门文章