弹性布局--flex方向
flex方向
flex方向由flex-direction特性决定,用于定义弹性布局模式。flex-direction共有4种模式:从左向右、从右向左、从上往下、从下往上。
主轴
主轴的起点与终点定义了容器元素的开始和结束边缘。
交叉轴
交叉轴的起点与终点定义了容器的顶部与底部。
从左向右:flex-direction:row
主轴:水平方向;交叉轴:垂直方向。
从右向左:flex-direction: row-reverse(flex-direction:row的反向)
从上往下:flex-direction: column
主轴:垂直方向;交叉轴:水平方向。
从下往上 : flex-direction: column-reverse(flex-direction: column反向)
注意:flexbox弹性布局不存在高、宽、水平、垂直等属性值。盒子模型的大小终于由浏览器计算得到。flexbox不会自己换行的,空间不够会自动伸缩。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0px;
} .flexbox-row{
display: flex;
flex-direction: row;
}
.box{
width: 50px;
height: 50px;
}
.flexbox-column{
display: flex;
flex-direction: column;
}
.flexbox-row-reverse{
display: flex;
flex-direction: row-reverse;
}
.flexbox-column-reverse{
display: flex;
flex-direction: column-reverse;
}
</style>
</head>
<body>
<!-- 从左向右 -->
<div class="flexbox-row">
<div class="box" style="background-color:coral;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:khaki;">C</div>
<div class="box" style="background-color:pink;">D</div>
<div class="box" style="background-color:lightgrey;">E</div>
<div class="box" style="background-color:lightgreen;">F</div>
</div> <!-- 从上往下 -->
<div class="flexbox-column">
<div class="box" style="background-color:coral;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:khaki;">C</div>
<div class="box" style="background-color:pink;">D</div>
<div class="box" style="background-color:lightgrey;">E</div>
<div class="box" style="background-color:lightgreen;">F</div>
</div>
<div class="flexbox-row"></div>
<!-- 从右往左 -->
<div class="flexbox-row-reverse">
<div class="box" style="background-color:coral;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:khaki;">C</div>
<div class="box" style="background-color:pink;">D</div>
<div class="box" style="background-color:lightgrey;">E</div>
<div class="box" style="background-color:lightgreen;">F</div>
</div> <!-- 从下往上 -->
<div class="flexbox-column-reverse">
<div class="box" style="background-color:coral;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:khaki;">C</div>
<div class="box" style="background-color:pink;">D</div>
<div class="box" style="background-color:lightgrey;">E</div>
<div class="box" style="background-color:lightgreen;">F</div>
</div>
</body>
</html>
弹性布局--flex方向的更多相关文章
- 弹性布局flex
前几天写过怪异盒子布局,以前在项目中用到弹性布局flex这个属性,当时没深入研究,这里各种查阅各种测试,把这个属性记录下 以免忘记, 弹性布局:是提供一种更加有效的方式来对一个容器中的条目进行排列.对 ...
- 前端入门5-CSS弹性布局flex
本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MD ...
- Flutter布局----弹性布局 (Flex)
弹性布局(Flex) 弹性布局允许子组件按照一定比例来分配父容器空间.弹性布局的概念在其它UI系统中也都存在,如H5中的弹性盒子布局,Android中的FlexboxLayout等.Flutter中的 ...
- Flutter 布局类组件:弹性布局(Flex)
前言 弹性布局允许子组件按照一定比例来分配父容器空间,Flutter中的弹性布局主要通过Flex和Expanded来配合实现. Flex Flex组件可以沿着水平或垂直方向排列子组件,如果你知道主轴方 ...
- 弹性布局Flex的基本语法
一.Flex的简介 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.用六个字概括弹性布局就是简单.方便.快速. flex( fle ...
- 微信小程序页面布局之弹性布局-Flex介绍
布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C 提出了一种新 ...
- 简单探讨弹性布局flex
css 弹性布局: 盒子模型: box-sizing属性1.content-box 正常的普通的盒子模型用padding和border会使盒子变大:(向外扩张)2.border-box 盒子模型,pa ...
- 弹性布局flex 介绍
摘自:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模 ...
- 移动端弹性布局--flex
目前,Flex布局,可以简便.完整.响应式地实现各种页面布局.而且,它已得到了所有浏览器的支持,这意味着,我们能很安全地使用这项功能. 如果你对弹性网页布局感兴趣,那可别错过flex这么好用的属性哦. ...
随机推荐
- 分享波面经【2年经验】【linux c++】
快三个月没写博客了,一直在忙着准备面试和去面试的路上,所以没时间写,也没什么想写的.现在告一段落,就总结一波! 面经 很感谢一些公司能给我面试机会,有的公司真的会拿学历卡人,也不想多说! 17年毕业, ...
- vue全家桶安装以及修改webpack配置新增vue项目启动方式
一.安装node环境(自带npm) 下载地址 二.替换下载源 // 淘宝 NPM 镜像 npm install -g cnpm --registry=https://registry.npm.taob ...
- 已实现乐观锁功能,FreeSql.DbContext 准备起航
上回说到 FreeSql.DbContext 的规则,以及演示它的执行过程,可惜当时还不支持"乐观锁",对于更新数据来讲并不安全. FreeSql 核心库 v0.3.27 已提供乐 ...
- 真win10官方原版ISO下载方法
最近装新机器,计划装个双系统,但是新硬件用不了Win7,只好改装Win10.经过数遍尝试,发现网上很多打着官方原版旗号的ISO以及各种装机软件,或多或少都捆绑了一些"流氓"软件,这 ...
- 企业级Harbor介绍及安装
企业级Harbor介绍及安装 一.Harbor介绍 VMware公司最近开源了企业级Registry项目Harbor,其的目标是帮助用户迅速搭建一个企业级的Docker registry 服务.它以D ...
- css,解决文字与图片对齐的问题
测试代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- QT读取xml配置文件
//获取字符串字段 QString ConfigHelper::GetStringConfigValue(QString str) { if(str == "InitDeviceNo&quo ...
- SQL Server AlwaysOn 集群 关于主Server IP与Listener IP调换的详细测试
1. 背景 SQL Server 搭建AlwaysOn后,我们就希望程序连接时使用虚拟的侦听IP(Listener IP),而不再是主Server 的IP.如果我们有采用中间件,则可以在配置中,直接用 ...
- Windows Server 2016-DNS 新增或改进功能
本章节补充介绍在 Windows Server 2016 中域名系统 (DNS) 服务器新增或已更改的功能相关信息,具体内容如下: 功能 新增或改进 描述 DNS 策略 新增 您可以配置 DNS 策略 ...
- 如何快速掌握DDT数据驱动测试?
1.前言 (网盗概念^-^)相同的测试脚本使用不同的测试数据来执行,测试数据和测试行为完全分离, 这样的测试脚本设计模式称为数据驱动.(网盗结束)当我们测试某个网站的登录功能时,我们往往会使用不同的用 ...