弹性布局--flex方向
2019-03-01 10:12:26来源:博客园 阅读 ()
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>
原文链接:https://www.cnblogs.com/whnba/p/10453697.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS Grid 布局 2020-06-01
- 构建一个杂志布局(译文) 2020-05-14
- 【2020Python修炼记】前端开发之 CSS基础布局 2020-05-13
- HTML连载86-添加视频、伸缩布局 2020-05-06
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash