flex弹性布局教程-02-容器display设置为flex
本节目标
- 掌握弹性布局的第一个设置display设置为flex。
- 掌握容器设置为flex布局后,内部元素的显示变化。
内容摘要
本篇介绍了弹性布局的第一步,需要先将容器display设置为flex,并逐步对其中的流程进行了讲解。
阅读时间10~15分钟。
容器display设置为flex
我们知道 display 是用来设置标签元素显示属性的,有none(不显示)、block(块元素)等等。
通过设置标签元素 display 为 flex 可以定义该容器使用 flex 布局,该容器下的项目就会自动切换为 flex 布局。
示例1,已知div父元素宽450,高300,设置其为flex弹性布局。示例总共分为3个步骤。
**1)**已知有如下html结构,1个div(容器)包含3个div(项目):
<div class="container"><div class="item item1">item1</div><div class="item item2">item2</div><div class="item item3">item3</div>
</div>
**2)**设置相关的样式方便看到几个div:
/* 设置容器的宽高、边框,方便看到样子 */
.container {width: 450px;height: 300px;margin: 8% auto;border: 1px solid pink;
}/* 设置3个项目的背景色 */
.item1 {background-color: skyblue;
}.item2 {background-color: aliceblue;
}.item3 {background-color: lightblue;
}
运行效果:
这边的运行效果比较简单,我们知道div是块元素,会自动占满一行,item1、item2、item3就顺序排列下来。
但是在实务中我们经常需要把div并列显示,以前我们经常是使用 float 浮动来处理,现在就可以用 flex 布局了。
**3)**容器设置为弹性布局flex:
.container { /* 设置子元素的布局为flex布局 */display: flex;
}
代码非常简单,就是在容器上设置display属性为flex就可以了。
运行效果:
观察运行效果,我们观察这边 3个项目 是并列显示。看到这个效果的读者可能就会联想到可以用这个来实现左右布局。
至此我们 flex 弹性布局 关键一步就设置完了。
完整代码:
<style>.container {width: 450px;height: 300px;margin: 8% auto;border: 1px solid pink;/* 设置子元素的布局为flex布局 */display: flex;}.item1 {background-color: skyblue;}.item2 {background-color: aliceblue;}.item3 {background-color: lightblue;}
</style>
<div class="container"><div class="item item1">item1</div><div class="item item2">item2</div><div class="item item3">item3</div>
</div>
当然只是这样意义不大,如果要实现更多效果:如项目的宽度、排列方式、间距等,就可以通过6个容器属性和6个项目属性进行设置。
本节总结
要使用flex弹性布局,需要先将 容器 的 display 属性设置为 flex,后面设置的相关属性才会生效。
flex弹性布局教程-02-容器display设置为flex相关推荐
- flex弹性布局教程-10容器属性justify-content
本节目标 掌握justify-content的基础使用. 掌握项目多列排列使用justify-content对齐的技巧. 内容摘要 本篇介绍了容器属性justify-content,用来设置项目在主轴 ...
- flex弹性布局教程-07容器属性flex-direction
本节目标 掌握flex-direction的使用. 了解主轴变化的概念. 内容摘要 本篇讲解了容器属性 flex-direction,用来设置主轴的方向. 阅读时间大约10~15分钟. flex容器属 ...
- flex弹性布局教程-12容器属性align-content
本节目标 掌握align-content的基础使用. 掌握align-content和justify-content的区别. 掌握align-content和align-items的区别. 内容摘要 ...
- flex弹性布局教程-04项目属性flex-grow
本节目标 掌握flex-grow的使用. 掌握flex-grow放大的计算公式(难点). 掌握编写导航条的技巧. 内容摘要 本篇介绍了项目属性 flex-grow,用于定义项目的扩大系数,用于分配容器 ...
- flex弹性布局教程-09-容器属性flex-flow
本节目标 掌握flex-flow的使用,flex-flow是flex-direction和flex-wrap的合集. 掌握上左右下的布局编写技巧. 内容摘要 本篇介绍了容器属性 flex-flow,是 ...
- flex弹性布局教程-03-项目属性flex-basis
本节目标 掌握 flex-basis 的用法. 了解 flex-basis 和 width 的不同. 阅读时间大约5分钟. 内容摘要 本篇介绍了 flex 项目属性的第一个 flex-basis ,用 ...
- Flex 弹性布局教程以及对主轴 交叉轴的理解 :语法篇
弹性布局的主轴交叉轴的理解 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main ...
- HTML中用弹性布局设置位置,HTML的flex弹性布局
flex 布局概述 1. flex 是什么flex 是 Flexible Box 的缩写,意为弹性布局 flex 2009 年就已出现,浏览器兼容性很好,请放心使用 2. flex 解决了什么问题块元 ...
- 页面布局 - flex弹性布局
flex弹性布局 html: <!DOCTYPE html> <html><head><meta charset="utf-8" /> ...
- 移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
最新文章
- 如何解决用谷歌浏览器调试代码接口请求的时候,跳转网页切换网页的时候,上一个页面的接口请求记录被清除消失的问题
- Android中 TextView的使用
- sublime中文输入(转)
- 让8只数码管从左往右显示1、2、3、4、、、8
- ./configure会报错:pr command not found
- ThinkPHP6项目基操(13.实战部分 项目中的自定义异常处理总结 错误页面API错误)
- pandas使用dataframe直接绘图时,取消图例(legend)
- thinkphp页面请求时间超过40S报404错误解决办法
- 一篇文章教你如何刷Letcode进大厂
- 基于因子分析和聚类分析 的SPSS河南省各地区综合发展分析+操作步骤+全文详细
- ERD-ONLINE 免费在线数据库建模工具
- 国美易卡对IP层数据进行处理,国美易卡对TCP/IP的封装
- 学游戏设计有前途吗?
- 玫瑰线轨迹如何规划?(desmos+ROS2+turtlesim+……)
- fedora安装 设置基础软件仓库时出错
- u大师u盘启动盘制作教程 教你怎么装系统(超微版)
- 立体栅格地图_三维栅格地图构建之二:视差图及点云图 | 学步园
- win10系统显示打印机未连接到服务器,win10系统无法连接到打印机的解决方法
- Android运行时Crash自动恢复框架:Recovery
- python中if语句and和or用法_Python从入门到精通——一文读懂if语句用法
热门文章
- 计算机学会a类论文是sci吗,什么是SCI、EI、CCF、DASFAA
- linux中怎么生成hwaddr,linux 下 hwaddr 和 macaddr的区别
- QQ空间技术架构之深刻揭秘
- RAW图片转换JPEG图片工具(免费)
- 每天被信息轰炸的你,如何辨别新闻真假?
- iOS从零开始,使用Swift:探索基础框架
- 融资租赁产品计算内部收益率IRR
- 基本农田卫星地图查询_别被迷惑了,你手机上的北斗导航App和北斗卫星导航没关系...
- gradle启动项目编译报错:Executing task ‘clean‘...Task execution finished
- 什么是IPFS - BlockChain Storage 区块链存储 (1)