(待补充)CSS进阶--flex布局
目录
- flex 之前
- flex 来了
- 基本概念
- flex container 的六个属性
- flex item 的六个属性
- 例子
- 参考
flex 之前
我们用什么布局?主要使用
- normal flow(正常流,也叫文档流)
- float + clear
- position relative + absolute
- display inline-block
- 负 margin
flex 来了
一种新的布局方式——Flex 布局
- 块级布局侧重垂直方向、行内布局侧重水平方向,flex 布局是与方向无关的。
- flex 布局可以实现空间自动分配、自动对齐(flexible:弹性、灵活)
- flex 布局适用于简单的线性布局,更复杂的布局要交给grid 布局
基本概念
父元素叫做flex container,子元素叫做flex item
在父元素上面加上display: flex;
就可以开启flex布局。
flex container 的属性
- flex-direction 方向
row(默认值):主轴为水平方向,起点在左端。row-reverse:主轴为水平方向,起点在右端。column:主轴为垂直方向,起点在上沿。column-reverse:主轴为垂直方向,起点在下沿。 复制代码
- flex-wrap 换行
nowrap(默认):不换行。wrap:换行,第一行在上方。wrap-reverse:换行,第一行在下方。 复制代码
- flex-flow 上面两个的简写
- justify-content 主轴方向对齐方式
flex-start(默认值):左对齐flex-end:右对齐center: 居中space-between:两端对齐,项目之间的间隔都相等。space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。 复制代码
- align-items 侧轴对齐方式
flex-start:交叉轴的起点对齐。flex-end:交叉轴的终点对齐。center:交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。 复制代码
- align-content 多行/多列内容对齐方式(用的较少)
flex-start:与交叉轴的起点对齐。flex-end:与交叉轴的终点对齐。center:与交叉轴的中点对齐。space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。stretch(默认值):轴线占满整个交叉轴。 复制代码
flex item 的属性
- order 顺序(代替双飞燕)
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。 复制代码
- flex-grow 增长比例(空间过多时)
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。 复制代码
- flex-shrink 收缩比例(空间不够时)
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。 复制代码
- flex-basis 默认大小(一般不用)
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。 复制代码
- flex 上面三个的缩写
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。 复制代码
- align-self 自身的对齐方式
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。 复制代码
例子
- 手机页面布局
- 产品列表
- PC页面布局
- 完美居中
参考
阮一峰flex教程
小游戏1
小游戏2
转载于:https://juejin.im/post/5ce12ef551882577e8451f75
(待补充)CSS进阶--flex布局相关推荐
- CSS 之 Flex布局
CSS 之 Flex布局 文章目录 CSS 之 Flex布局 1.Flex布局 vs 网格布局 (1D vs 2D) 2.Flex属性 1)flex-direction属性 & 排列方向 2) ...
- CSS的Flex布局的学习
CSS的Flex布局的学习 哔哩哔哩链接:https://www.bilibili.com/video/BV1iE411y7hb?p=131 Flex(弹性盒.伸缩盒)是CSS中的又一种布局手段,它主 ...
- css使用flex布局实现骰子1~6
css使用flex布局实现骰子1~6 效果 Html <body><div class='div1 border'><span></span></ ...
- 常用CSS与Flex布局、媒体查询、JS事件控制css、VUE对象语法、Gride布局(待补全) CSS权重 页面适配笔记本缩放
css属性就是要用的多用的熟 知道的多 就像一本工具书 除了基础原理 剩下的就是知识面了 极力推荐MDN用过的人都说好~ 页面适配笔记本等自带缩放的场景 let t = window.devicePi ...
- 通过游戏来学习CSS的Flex布局
在复习Flex 布局的时候发现的了几个有趣的小游戏,在这里分享并记录几个有难度的答案 1. Flexbox Froggy 通过调整CSS样式来使各种青蛙回到对应的荷叶上,游戏默认难度为Beginner ...
- css之flex布局
flex布局是css3中的重要布局方式,称为"弹性布局",每次想到它主要是遇到元素垂直居中.元素宽高自适应的问题,这些问题在flex中都能过简单设置就解决,它更像是原生APP中的布 ...
- 详解CSS的Flex布局
本文由云+社区发表 Flex是Flexible Box 的缩写,意为"弹性布局",是CSS3的一种布局模式.通过Flex布局,可以很优雅地解决很多CSS布局的问题.下面会分别介绍容 ...
- 网页HTML5制作flex布局骰子,css利用flex布局画骰子的六个面
主要是利用flex的一些特性来写的,掌握好flex基础,写出筛子的几个页面不是问题. 推荐去我写的一个博客中有flex的小练习 线上练习flex布局 html css .shaizi { width: ...
- CSS(二)——Flex布局 边框 渐变 过渡 动画
学习CSS第二周的总结 一. Flex布局 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结束位 ...
最新文章
- 每个程序员都需要学习 JavaScript 的7个理由
- REST 架构是什么
- MySQL AHI 实现解析
- FastDFS配置nginx插件访问图片
- 【linux】查看字体
- linux服务器配置与管理_服务器维护实施步骤
- anaconda-虚拟环境的控制-新建-切换-删除
- [Angularjs]国际化
- Hexo + github 打造个人博客
- S5PV210 芯片降价
- SQL Server 2008中文版关系数据库基础与实践教程pdf
- Java之品优购课程讲义_day03(6)
- SpringBoot整合Sharding-JDBC实现水平分库分表
- XPS Silverlight Reader
- java 在线画布_使用canvas制作在线画板
- 使用construct3制作Mario游戏
- travis不生效,No builds for this repository
- python写鼠标宏_win操作(1)-键盘鼠标输入
- 基于阿里云IOT Studio和STM32的电机远程监测设计
- React.SetStateAction<never[]>