Flex布局(一)flex-direction
2018-06-24 02:26:10来源:未知 阅读 ()
采用Flex布局的元素,被称为Flex容器(flex container),简称"容器"。其所有子元素自动成为容器成员,成为Flex项目(Flex item),简称"项目"
Flex-direction调整主轴方向(默认为水平方向)包括row、column、row-reverse、column-reverse
代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>CSS3伸缩布局</title>
- <style>
- body {
- margin: 0;
- padding: 0;
- font-family: '微软雅黑';
- background-color: #F7F7F7;
- }
- ul {
- margin: 0;
- padding: 0;
- list-style: none;
- }
- .wrapper {
- width: 1024px;
- margin: 0 auto;
- }
- .wrapper > section {
- min-height: 300px;
- margin-bottom: 30px;
- box-shadow: 1px 1px 4px #DDD;
- background-color: #FFF;
- }
- .wrapper > header {
- text-align: center;
- line-height: 1;
- padding: 20px;
- margin-bottom: 10px;
- font-size: 30px;
- }
- .wrapper section > header {
- line-height: 1;
- padding: 10px;
- font-size: 22px;
- color: #333;
- background-color: #EEE;
- }
- .wrapper .wrap-box {
- padding: 20px;
- }
- .wrapper .brief {
- min-height: auto;
- }
- .wrapper .flex-img {
- width: 100%;
- }
- /*全局设置*/
- section ul {
- display: flex;
- }
- section li {
- width: 200px;
- height: 200px;
- text-align: center;
- line-height: 200px;
- margin: 10px;
- background-color: pink;
- }
- /*垂直方向*/
- section:nth-child(2) ul {
- display: flex;
- }
- .column ul {
- flex-direction: column;
- }
- .row-reverse ul {
- flex-direction: row-reverse;
- }
- .column-reverse ul {
- flex-direction: column-reverse;
- }
- /*1、指定一个盒子为伸缩盒子 display: flex*/
- /*2、设置属性来调整此盒的子元素的布局方式 例如 flex-direction*/
- /*3、明确方向*/
- /*4、它可互换主侧轴,也可改变方向*/
- </style>
- </head>
- <body>
- <div class="wrapper">
- <header>CSS3-伸缩布局详解</header>
- <!-- 简介 -->
- <section class="brief">
- <header>flex-direction</header>
- <div class="wrap-box">
- <p>调整主轴方向(默认为水平方向)包括row、column、row-reverse、column-reverse</p>
- </div>
- </section>
- <!-- 分隔线 -->
- <section>
- <header>flex-direction</header>
- <div class="wrap-box">
- <p>调整主轴方向(默认为水平方向)</p>
- <ul>
- <li>1</li>
- <li>2</li>
- <li>3</li>
- </ul>
- </div>
- </section>
- <section class="column">
- <header>column</header>
- <div class="wrap-box">
- <p>调整主轴方向(默认为水平方向)</p>
- <ul>
- <li>1</li>
- <li>2</li>
- <li>3</li>
- </ul>
- </div>
- </section>
- <section class="row-reverse">
- <header>row-reverse</header>
- <div class="wrap-box">
- <p>调整主轴方向(默认为水平方向)</p>
- <ul>
- <li>1</li>
- <li>2</li>
- <li>3</li>
- </ul>
- </div>
- </section>
- <section class="column-reverse">
- <header>column-reverse</header>
- <div class="wrap-box">
- <p>调整主轴方向(默认为水平方向)</p>
- <ul>
- <li>1</li>
- <li>2</li>
- <li>3</li>
- </ul>
- </div>
- </section>
- </div>
- </body>
- </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