默认布局换行_自学整理 CSS Flex 布局
引言
最近记性特别不好,居然忘记 Flex 布局子项居中怎么写了,于是又看了一遍阮一峰老师的《Flex 布局教程》,为了能够加深记忆,边做记录边练习,因此整理本文作为自学笔记。
本文来源:阮一峰老师的《Flex 布局教程》
Flex 布局又称 "弹性布局" 。任何一个容器都可以指定为 Flex 布局。
采用 Flex 布局的外层元素叫做 “容器” ,子元素叫做 “项”。
容器必须设置下面的代码,才能采用 Flex 布局。
display: flex | inline-flex
inline-flex 代表容器是个行内元素。
容器有两根轴:水平的主轴和垂直的交叉轴。
容器属性
flex-direction
项的排列方向。
.container { flex-direction: row | row-reverse | column | column-reverse;}
row :默认,水平方向排列,方向起点在左侧。
row-reverse :水平方向逆向排列,方向起点在右侧。
column :垂直方向排列,方向起点在顶端。
column-reverse :垂直方向排列,方向起点在底端。
flex-wrap
项会自动排列在一个方向上,不会换行。如果换行显示,就需要 flex-wrap 属性。
.container { flex-wrap: nowrap | wrap | wrap-reverse;}
wrap :默认,不换行。
wrap:换行,第一行在上面。
wrap-reverse :换行,第一行下下面。
flex-flow
flex-direction 属性和 flex-wrap 属性的简写,默认值为 row nowrap 。
.container { flex-flow: | ;}
justify-content
项 (水平) 对齐的方式。根据 flex-direction 设置的方向决定水平或垂直对齐。
.container { justify-content: flex-start | flex-end | center | space-between | space-around;}
flex-start :默认,项左对齐。
flex-end :项右对齐。
center :项居中对齐。
space-between :项两端对齐,项之间的间隔相等。
space-around :项两侧间隔相等,所以第 1 项和第 2 项与边框的距离要比项之间的距离小 1 倍。
align-items
项 (垂直) 对齐的方式。根据 flex-direction 设置的方向决定水平或垂直对齐。
.container { align-items: stretch | flex-start | flex-end | center | baseline;}
stretch :默认,如果项没有设置高度或者高度为 auto ,则占满整个容器的高度。
flex-start :顶端对齐。
flex-end :底端对齐。
center :居中对齐。
baseline :baseline :第一行文字的底端 (基线) 对齐。可以设置项的 line-height 看效果。
align-content
align-content 属性定义如何使用垂直的剩余空间,也就是说如果项只占用一行,这个属性不发挥作用,如果项换行了,则可以设置剩余垂直空间的对齐方式。根据 flex-direction 设置的方向决定水平或垂直对齐。
.container { align-content: stretch | flex-start | flex-end | center | space-between | space-around;}
stretch :默认,占满这个垂直高度。
flex-start :顶端对齐。
flex-end :底端对齐。
center :居中对齐。
space-between :两端对齐,间隔平均分布。
space-around :项两侧的间隔都相等。所以,边框和项的距离比项与项之间的距离小 1 倍。
项属性
order
定义项的顺序。数值越小,越靠前,默认为 0 。
.item { order: ;}
例如:
.item-1 { order: 6;}
flex-grow
.item { flex-grow: ; /* 默认 0 */}
定义项的放大比例,默认为 0 ,不放大。
所有项的 flex-grow 属性都为 1 时,如果还有剩余空间,则它们将等分剩余空间。相当于 “份” 的概念。
flex-shrink
项的缩小比例。项仅在默认宽度之和大于容器的时候才会发生缩小,也就是说在容器宽度不够的时候,才缩小,其缩小的比例是依据 flex-shrink 的值进行设置。默认值为 1 。
容器空间不足时,项将等比缩放,如果一个项的 flex-shrink 属性为 0,为 0 的项不缩放。
.item { flex-shrink: ; /* default 1 */}
2、3 项的 flex-shrink 属性为 0。
flex-basis
定义了项占据容器空间的初始大小。默认为 auto ,即项的本来大小,浏览器会根据这个属性,计算容器是否有多余空间。
当设置了项的 width 或 height 时,flex-basis 优先级更高。
.item { flex-basis: | auto; /* 默认 auto */}
例如,给第 2 项同时设置了 width 和 flex-basis ,那么在分配剩余空间前先计算出第 2 项的尺寸,然后再分配剩余空间,同时第 2 项的宽度为 flex-basis 设置的值,因为它的优先级高。
.item-2 { width: 100px; flex-basis: 300px;}
align-self
设置单个项的对齐方式,可覆盖容器的 align-items 属性。默认值为 auto,表示继承父元素的 align-items 属性,如果父元素没有 align-items 属性,则等同于 stretch 。根据容器的 flex-direction 设置的方向决定水平或垂直对齐。
.item { align-self: stretch | auto | flex-start | flex-end | center | baseline;}
stretch :如果项没有设置高度或者高度为 auto,且没有父元素的 align-items 属性 ,则占满整个容器的高度。
auto :继承父元素的 align-items 属性,如果父元素没有 align-items 属性,则等同于 stretch 。
flex-start :顶端对齐。
flex-end :底端对齐。
center :居中对齐。
baseline :第一行文字的底端 (基线) 对齐。可以设置 line-height 看效果。
flex
flex-grow , flex-shrink 、flex-basis 的简写,默认值为 0 1 auto 。后两个属性可选。
.item { flex: none | auto | [ || ]}
none :为 0 0 auto 。
auto :就是默认值 1 1 auto 。
flex:1; 代表按照容器减去其它项后的尺寸,然后该容器填满这个尺寸。相当于 flex-grow: 1; 。
总结
水平位置和垂直位置对齐要根据容器的 flex-direction 设置。
本文非原创,根据阮一峰老师《Flex 布局教程》自学整理。对于我个人不好理解的词句,多读了几遍,用我个人理解的意思表达,但整体思路和顺序,依然遵循阮一峰老师的文章。
最近记性特别不好,居然忘记 Flex 布局子项居中怎么写了,于是又看了一遍阮一峰老师的《Flex 布局教程》,为了能够加深记忆,边做记录边练习,因此整理本文作为自学笔记。
本文来源:阮一峰老师的《Flex 布局教程》
默认布局换行_自学整理 CSS Flex 布局相关推荐
- java流式布局换行_自动换行的流式布局
1.[代码][Java]代码 package com.robert; import android.content.Context; import android.util.AttributeSet; ...
- css布局方式_手把手教你CSS Flex布局「真香」
作者:EcbJS 转发链接:https://blog.csdn.net/EcbJS/article/details/106466757 前言 之前做项目,关于布局方面没怎么深入研究过,好多页面都是 ...
- html实现 左图右文_让CSS flex布局最后一行左对齐的N种方法
作者:张鑫旭 https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/ 前言 小伙伴们是否还记得,之前小编也发布了几篇关于CS ...
- html flex自动换行,css flex布局超长自动换行的示例代码
要创建一个 flex 容器,只需要将一个 display: flex 属性添加到一个元素上. 默认情况下,所有的直接子元素都被认为是 flex 项,并从左到右依次排列在一行中. 如果 flex 项的宽 ...
- flex右对齐_移动WEB开发 — Flex布局
一.Flex布局原理 1.1 传统布局与 flex 布局 建议: 1.如果是PC端页面布局,我们还是使用传统布局: 2.如果时移动端或者不考虑兼容性问题的PC端页面布局,我们使用flex弹性布局: f ...
- [css] flex布局的缺点有哪些?(除兼容性外)
[css] flex布局的缺点有哪些?(除兼容性外) 无法直接定义列数(要使用百分比的方式实现) 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目 ...
- css flex布局 模型(CSS justify-content 属性) - 代码案例
css flex布局 模型(CSS justify-content 属性) - 代码案例 效果图: . 代码如下: .father{display: -webkit-box;display: -ms- ...
- Bootstrap(一)——简介、布局容器和工具类使用(flex布局)
文章目录 一.Bootstrap简介 二.布局容器 2.1 定宽容器 container 2.2 变宽容器 container-fluid 三.工具类 3.1 颜色与排版 (1)常用颜色 (2)常用排 ...
- CSS flex布局
1. 介绍 1.1 说明 flex布局,也称为flex弹性布局:主要目的是使item的宽度.高度按一定顺序填充父容器的可用空间. 示例 注意:在下文中,将以parent指代父容器,item指代容器内的 ...
最新文章
- 或许不理解,但你一定说过的游戏黑话
- 机器学习实战-PCA算法-26
- DB2常用函数:字符串函数
- unity串口 连接多个串口崩溃_3分钟全面了解串口服务器原理技术
- oform java_客户端表单通用验证checkForm(oForm)(1)
- 数据库创建时间,更新时间设计
- 嵌入式Linux内核优化裁剪
- cmake编译gtest测试程序(三)
- 32位寄存器用法介绍
- Redis的lua脚本
- 初识Exchange2010
- 施密特触发器——用于正弦波转方波、脉冲波整形
- 用户用户组,与密码管理,su,sudo命令,限制root远程登陆
- python中syntaxerror_解决python中syntaxerror错误的方法
- 基于PHP和YII框架技术的班级管理系统 | 饭饭博客
- 爬虫项目七:Python对唯品会商品数据、评论数据的爬取
- testNG接口自动化测试干货分享
- selenium找到页面元素click没反应
- Boost -----无法打开文件“libboost_thread-vc120-mt-gd-x32-1_73.lib
- 立标机器人_立镖CEO夏慧玲:物流机器人“小黄人”的前世、今生与未来