页面布局 - flex弹性布局

flex弹性布局

html：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><style type="text/css">*{margin: 0;padding: 0;box-sizing: border-box;}.wrap{width: 300px;height: 300px;display: flex;flex-direction: row; /*默认主轴方向水平向右*/flex-direction: row-reverse;  /*可选主轴方向水平向左*/ /* flex-direction: column; */  /*可选主轴方向垂直向下*//* flex-direction: column-reverse; */ /*可选主轴方向垂直向上*/flex-wrap: wrap;  /*默认侧轴方向与主轴垂直方向向下或者右*//* flex-wrap: wrap-reverse; */ /*可选侧轴方向与主轴垂直方向向上或者左*/}.wrap div{background: skyblue;text-align: center;line-height: 100px;width: 100px;height: 100px;border: bisque 1px solid;}</style></head><body><div class='wrap'><div"order: 1;">0</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></div></body>
</html>

步骤一：先给父级容器设置 display: flex;，代表采用 flex 弹性布局
步骤二：设置主轴方向
①flex-direction: row；（默认参数）主轴方向水平向右，结果如图：

②flex-direction: row-reverse;（可选参数）主轴方向水平向左，结果如图：

③flex-direction: column;（可选参数）主轴方向垂直向下，结果自行脑补（主要是太长了/偷笑）
④flex-direction: column-reverse;（可选参数）主轴方向垂直向上，同理
步骤三：设置侧轴方向
①flex-wrap: wrap;默认侧轴方向与主轴垂直方向向下或者右，结果如图：

②flex-wrap: wrap-reverse;可选侧轴方向与主轴垂直方向向上或者左,结果脑补
注意：侧轴的方向是随主轴的变化的，主轴于侧轴总是垂直，两轴的方向默认向右、下
其他属性设置：
flex-flow:<flex-direction> <flex-wrap> 是这两个属性的简写，双参数时是主轴方向+侧轴方向，两个参数空格隔开；单参数时是主轴方向。
order:number 伸缩项，例如给子容器添加一个order：1,所有子容器的默认order都为0，我们给第一个容器order设置为1时会产生类似于排序的效果

justify-content:flex-start(default)||flex-end||center||space-between||space-around 伸缩容器

页面布局 - flex弹性布局相关推荐

flex将元素放在最后_前端布局——Flex弹性布局
本篇解释了有关flexbox的知识点内容,重点介绍父元素(flex容器)和子元素(flex元素)的不同及可能的属性. 背景 Flexbox Layout弹性布局模块的目的在于提供一种更有效的方式来布置 ...
移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
flex 左右布局_web前端学习：移动端开发常用布局—前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
超详细的flex弹性布局+实例分析
1.基本概念什么是flex? flex全称是FlexibleBox,即弹性盒子,用来进行弹性布局,弹性布局也是目前前端应用最广的布局之一. flex布局的优点,为什么要用flex布局? 1.可以为盒 ...
flex弹性布局教程-04项目属性flex-grow
本节目标掌握flex-grow的使用. 掌握flex-grow放大的计算公式(难点). 掌握编写导航条的技巧. 内容摘要本篇介绍了项目属性 flex-grow,用于定义项目的扩大系数,用于分配容器 ...
前端~css~Chrome调试工具、元素显示模式、盒模型、flex弹性布局
文章目录 Chrome调试工具块级元素行内元素盒模型 flex布局(弹性布局) 常用属性 Chrome调试工具在浏览器任何一个网页中,鼠标右键单击,选择检查,可打开调试工具.或者f12键. 打 ...
CSS Flex布局（弹性布局）(圣杯布局)
目录 Flex布局(弹性布局)的特点 Flex布局模型构成组成部分主轴对齐方式修改主轴方向弹性盒子换行侧轴对齐方式子盒子水平垂直居中: 使用flex属性修改弹性盒子伸缩比通过flex实现 ...
移动端常见布局方式(流式布局、flex弹性布局、less+rem+媒体查询、Bootstrap)
目录一:移动端页面 1.流式布局(百分比布局) 2.flex弹性布局(重点♥) flex布局初体验: flex布局原理: flex布局父项常见属性 flex-direction 设置主轴的方向 ♥ ...
flex弹性布局教程-09-容器属性flex-flow
本节目标掌握flex-flow的使用,flex-flow是flex-direction和flex-wrap的合集. 掌握上左右下的布局编写技巧. 内容摘要本篇介绍了容器属性 flex-flow,是 ...

页面布局 - flex弹性布局

flex弹性布局

页面布局 - flex弹性布局相关推荐

最新文章

热门文章