Flex布局(一)flex-direction
采用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 {
- ;
- ;
- font-family: '微软雅黑';
- background-color: #F7F7F7;
- }
- ul {
- ;
- ;
- 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;
- ;
- padding: 20px;
- margin-bottom: 10px;
- font-size: 30px;
- }
- .wrapper section > header {
- ;
- 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;
- }
- /*垂直方向*/
- ) 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>
- <</li>
- <</li>
- </ul>
- </div>
- </section>
- <section class="column">
- <header>column</header>
- <div class="wrap-box">
- <p>调整主轴方向(默认为水平方向)</p>
- <ul>
- <</li>
- <</li>
- <</li>
- </ul>
- </div>
- </section>
- <section class="row-reverse">
- <header>row-reverse</header>
- <div class="wrap-box">
- <p>调整主轴方向(默认为水平方向)</p>
- <ul>
- <</li>
- <</li>
- <</li>
- </ul>
- </div>
- </section>
- <section class="column-reverse">
- <header>column-reverse</header>
- <div class="wrap-box">
- <p>调整主轴方向(默认为水平方向)</p>
- <ul>
- <</li>
- <</li>
- <</li>
- </ul>
- </div>
- </section>
- </div>
- </body>
- </html>
Flex布局(一)flex-direction的更多相关文章
- flex布局中flex属性运用在随机发红包的算法上
flex布局是现在前端基本上都会运用的一种布局,基本上用到比较多的是父元素设置display:flex,两个子元素,一个设置固定宽度,另一个设置为flex:1(这里都指flex-direction为r ...
- 重新总结flex布局(flex,flex-direction,justify-content,align-items,flex-wrap,align-self)
1.flex,主要就是按比例分配.(例如:两个div的flex:1,就大小相等) .box1{ flex:1; background-color: red; } .box2{ flex:1; back ...
- 微信小程序开发之搞懂flex布局2——flex container
容器的概念,是用来包含其它容器(container)和项目(item). flex container——flex容器 A flexbox layout is defined using the fl ...
- 微信小程序开发之搞懂flex布局3——Flex Item
Flex Item flex容器的子元素就是这个容器的flex item. The direct children of a Flex Container (elements with display ...
- 关于基本布局之——Flex布局
Flex布局 1.Flex为"Flexible Box"的简称,即为弹性布局,可作用于任何容器上.给div这类块状元素元素设置display:flex或者给span这类内联元素设置 ...
- [flex布局]-flex教程
简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...
- 微信小程序开发:Flex布局
微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...
- 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)
实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...
- flex布局的使用,纪念第一次开发手机网站
一直专注于PC网站的开发,不曾接触手机网站,于今日机缘巧合也是公司业务需要,并在之前学习过flex的布局,于是一并实践.碰到的问题还是很多的,主要是谈谈flex布局. flex布局是css3里的内容, ...
- flex布局小记
越来越深刻的感到日事日毕的必要性,很久之前就做了备忘说要深刻学习flex布局,没想到一拖就拖到了这个时候! 一,什么是flex布局: flex布局即flexible box布局,也就是弹性盒模型或者弹 ...
随机推荐
- PAT 1034. Head of a Gang[bug]
有一个两分的case出现段错误,真是没救了,估计是要写bfs的形式,可能栈溢出了 #include <cstdio> #include <cstdlib> #include & ...
- SASS和LESS等优缺点对比,使用方法总结 (笔记大全)
sass优点: 用户多,更容易找到会用scss的开发,更容易找到scss的学习资源: 可编程能力比较强,支持函数,列表,对象,判断,循环等: 相比less有更多的功能: Bootstrap/Found ...
- cocos-creator 脚本逻辑-1
1.节点 编辑组件的脚本文件时.可以通过以下语句获得节点 this 就是当前组件 this.node 拿到组件依附的节点 This.node.parent 拿到组件依附的节点 的父节点 This.no ...
- Nodejs学习笔记之复制文件
前端童鞋都知道,javascript是没有权限操作磁盘文件的,server童鞋一向都很鄙视.但是nodejs可谓让咱们前端扬眉吐气啊,最近在学node,其强大的功能让人异常激动和兴奋.今天就学习了它怎 ...
- CSS 3动画
CSS 3在原来的基础上新增了变形和动画相关的属性,通过这些属性可以实现以前需要大段JavaScript才能实现的功能.css 3的变形功能可以对HTML元素执行位移.旋转.缩放.倾斜4种几何变换,借 ...
- Yii2.0 新建项目通用准备工作
1.设置 cookieValidationKey 在 config/web.php 中 config 里有 components项中request有个cookieValidationKey需要配置参数 ...
- 第4课 简易浏览器-WebViewer组件的使用方法
做一个手机浏览器,需要哪些组件呢? 一.组件设计 二.组件属性及命名修改 三.逻辑设计 1.导航按钮代码:前进.后退.主页 2.访问网页按钮 1)根据用户在地址栏输入的地址书写,判断书写中是否含有“h ...
- JS高级程序设计第三版——变量、作用域和内存问题
JavaScript变量: 由于JavaScript变量松散类型的本质,决定了它只是在特定时间用于保存特定值的一个名字而已.由于不存在定义某个变量必须要保存何种数据类型值的规则,变量的值及其数据类型可 ...
- xlwings: Write Excel macro using python instead of VBA
i want to write Excel macros to deal with the data, but i am not familiar with VBA language. so i de ...
- devexpress 中 XtraTabcontrol 改变BackColor 的方法
装载自CSDN,原文地址 https://blog.csdn.net/zjzytnn/article/details/53699340 今天在实现CAD文件的读和显示操作的时候,需要将CAD文件显示 ...