CSS中flex的用法( 学习笔记 )
flex( 弹性盒、伸缩盒 )
flex 的介绍
- flex是CSS中的又一种布局手段,它主要用来代替浮动来完成页面的布局
- flex可以使元素具有弹性,让元素可以随页面的大小的改变而改变
弹性容器
- 要使用弹性盒,必须先将一个元素设置为弹性容器
- 我们通过 display 来设置弹性容器
- display:flex 设置为块级弹性容器(常用)
- deplay:inline-flex 设置为行内的弹性容器
弹性元素
- 弹性容器的直接子元素( 非后代 )是弹性元素(弹性项)
- 弹性元素可以同时是弹性容器
弹性容器的属性
一、flex-direction
- flex-direction 指定容器中弹性元素的排列方式
- 可选值:
- row 默认值,弹性元素在容器中水平排列(从左向右) row-reverse
- 弹性元素在容器中反向水平排列(从右向左)
- column 弹性元素纵向排列(从上向下)
- column-reverse 弹性元素纵向排列(从下向上)
- 主轴:弹性元素的排列方向称为主轴
- 侧轴:与主轴垂直方向的称为侧轴
二、flex-grow(弹性元素的增长系数)
- flex-grow 指定弹性元素的伸展的系数
- 当父元素有多余空间的时候,子元素如何伸展
- 父元素的剩余空间,会按照比例进行分配
- 例子:flex-grow: 1; 默认值0时不伸展
三、flex-shrink(弹性元素的缩减系数)
- flex-shrink 指定弹性元素的收缩系数
- 当父元素中的空间不足以容纳所有子元素时,对子元素进行收缩
四、flex-wrap
- 设置弹性元素是否在弹性容器里自动换行
- 可选值: nowrap 默认值,元素不会自动换行
- wrap 元素沿着辅轴方向自动换行
- wrap-reverse 元素沿着辅轴反方向换行
- flex-flow:wrap 和 direction 的简写属性
五、justify-conten
- 分配主轴上的空白空间(主轴上的元素如何排列)
- 可选值:
- flex-start 元素沿着主轴起边排列
- flex-end 元素沿着主轴终边排列
- center 元素居中排列
- space-around 空白分布到元素两侧
- space-between 空白均匀分布到元素间
- space-evenly 空白分布到元素的单侧
- 注意:有 justify 的代表元素在主轴上的排列
六、align-items
- 元素在辅轴上如何对齐
- 元素与元素间的关系
- 可选值: stretch 默认值,将元素的长度设置为相同的值
- flex-start 元素不会拉伸,沿着辅轴起边对齐
- flex-end 元素不会拉伸,沿着辅轴终边对齐
- center 居中对齐
- baseline 基线对齐
七、align- content
- 分配辅轴上的空白空间
- 可选值:
- flex-start 元素沿着主轴起边排列
- flex-end 元素沿着主轴终边排列
- center 元素居中排列
- space-around 空白分布到元素两侧
- space-between 空白均匀分布到元素间
- space-evenly 空白分布到元素的单侧
- 注意:有 align 的代表元素在辅轴上的排列
八、align-self
- 用来覆盖弹性元素上的align-items
九、flex-basis
- 指定的是元素在主轴上的基础长度
- 如果主轴是横向的 则 该值指定的就是元素的高度
- 如果主轴是纵向的 则 该值指定的就是元素的宽度
- 默认值是 auto ,表示参考元素自身的高度或宽度
- 如果传递了一个具体的数值,则以该值为准
十、order
- 设置弹性元素的排列顺序
- 例子:order: 1; 弹性元素排第一个
总结:
- flex可以设置弹性元素所有的三个样式:
- flex 增长 缩减 基础;
- 可选值:
- initial “flex: 0 1 auto;”
- auto “flex: 1 1 auto;”
- none "flex: 0 0 auto"弹性元素没有弹性
w3school导航栏实例:
<ul class="nav"><li><a href="#">HTML/CSS</a></li><li><a href="#">Browser Side</a></li><li><a href="#">Server Side</a></li><li><a href="#">Programming</a></li><li><a href="#">XML</a></li><li><a href="#">Web Building</a></li><li><a href="#">Reference</a></li></ul>
.nav{width: 1210px;height: 48px;line-height: 48px;background-color: #E8E7E3;margin: 50px auto;margin-top: 100px;list-style: none;display: flex;padding-left: 0;}.nav li{flex-grow: 1;}.nav a{display: block;color: #808080;text-decoration: none;font-size: 18px;text-align: center}.nav a:hover{color: #fff;background-color: #636363;}
CSS中flex的用法( 学习笔记 )相关推荐
- html nthchild作用,详解CSS中:nth-child的用法
前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是":nth-child". 下面我将用几个典型的实例来给大家讲解:nt ...
- web前端分享HTML5中的nav标签学习笔记
好程序员web前端分享HTML5中的nav标签学习笔记,nav标签全称navigation,顾名思义,是导航的意思.根据HTML5的相关标准定义如下: "A section of a pag ...
- css预处理器(less学习笔记)
什么是css预处理器? CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作 ...
- CSS的Flex布局的学习
CSS的Flex布局的学习 哔哩哔哩链接:https://www.bilibili.com/video/BV1iE411y7hb?p=131 Flex(弹性盒.伸缩盒)是CSS中的又一种布局手段,它主 ...
- css中hideFocus的用法
css中hideFocus的用法 简单说:hideFocus是对超链接外虚线框的设定! hideFocus即隐藏聚焦,具有使对象聚焦失效的功能,其功能相当于: onFocus="this.b ...
- 数据库LINQ TO SQL在Silverlight中的应用(WCF)------学习笔记(一)
数据库LINQ TO SQL在Silverlight中的应用(WCF)------学习笔记(一) 步骤: 1. 创建SILVERLIGHT应用程序 2. 创建LINQ TO SQL [注意序列化的问题 ...
- C++ 中 参数包 (typename ...) 学习笔记
C++ 中 参数包 (typename -) 学习笔记 本文所属地址 https://www.lucien.ink 起因 突然好奇 STL 的 std::tuple 是怎么实现不定参数的,遂搜了搜,发 ...
- html css中margin的用法
css中margin的用法 1.使用auto实现在浏览器水平自动居中 2.margin实现贴边 3.使用margin垂直外边距的合并 示例: 4.margin-top的塌陷问题 1.外部盒子设置一个边 ...
- 前端「HTML+CSS」零基础入门学习笔记
HTML+CSS入门笔记目录 一.HTML 简介 1.HTML是什么? 2.什么是HTML标签? 二.HTML 文档结构 1.HTML基本结构 2.文档类型声明标签 3.lang语言属性 4.字符集与 ...
最新文章
- xp系统本地连接服务器,本地连接,xp系统本地连接不见了怎么办
- 复数 Complex Number 教程
- 确认对话框ConfirmDialog和选择对话框OptionDialog
- 【智力问题】25匹马赛跑,每次只能跑5匹马,最快能赛几次找出跑得最快的3匹马?赛跑不能计时,并假设每匹马的速度是恒定不变的。...
- 设计模式学习笔记(十七)——Command命令模式
- windows下eclipse搭建android_ndk开发环境
- 清华学生计划表,大写的服!
- php生成链接列表,根据URL链接和抛文本生成链接a标签的PHP函数
- 依赖反转原理,IoC容器和依赖注入:第3部分
- [Android]对MVC和MVP的总结
- Buffer对象与JSON对象相互转换
- 怎么用html做随机颜色,JavaScript 实现网站标签随机颜色的方法
- 某大型电商云平台实践
- 嫦娥四号的通讯速率,为何没有视频直播
- 设置谷歌浏览器的flash 插件
- 电力猫服务器的网页,电力猫方案完美解决家庭网络布局
- 数据库根据字段查询对应所在的表或者对应的数据库
- 学生个人网页设计作品 学生个人网页模板 简单个人主页成品 个人网页制作 HTML学生个人网站作业设计 汉语言文学设计题材网页
- 出租屋宽带网络解决方案
- Panoramic Photography
热门文章
- android 自动翻页插件,网页自动翻页Chrome插件下载
- linux 函数中打印调用栈
- 微软宣布Windows更新计划,Win10将在2025年停止服务支持
- PAT_乙级_1004_筱筱
- 项目一. 家庭记账软件
- Spring + SpringMVC + Hibernate + Shiro整合
- 笔记记本显卡Radeon 680M、mx570和mx450差距 680M、mx570和mx450对比
- Android11.0下应用管控实现解决方案(家长管理)(一)
- openwrt路由器接华为E3372(E8372)网卡实现4G转有线和WIFI
- android2.2智能手机,Jelly 2:全球最小的Android 10 4G智能手机