flex布局学习总结
最近项目主要是小程序,小程序里面的布局主要采用flex布局,之前对flex 布局只是稍作了解,总结下flex 布局的常用套路
容器
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。像这样:
.container{
display: flex;
}
轴(Axis)
每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。
flex-direction
确立主轴。
justify-content
定义了在当前行上,弹性项目沿主轴如何排布。
align-items
定义了在当前行上,弹性项目沿侧轴默认如何排布。
align-self
定义了单个弹性项目在侧轴上应当如何对齐,这个定义会覆盖由 align-items
所确立的默认值。
方向(Direction)
弹性容器的主轴起点(main start)/主轴终点(main end)和侧轴起点(cross start)/侧轴终点(cross end)描述了弹性项目排布的起点与终点。它们具体取决于弹性容器的主轴与侧轴中,由 writing-mode
确立的方向(从左到右、从右到左,等等)。
order 属性将元素与序号关联起来,以此决定哪些元素先出现。
flex-flow 属性是 flex-direction 和 flex-wrap 属性的简写,决定弹性项目如何排布。
行(Line)
根据 flex-wrap 属性,弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。
尺寸(Dimension)
根据弹性容器的主轴与侧轴,弹性项目的宽和高中,对应主轴的称为主轴尺寸(main size) ,对应侧轴的称为 侧轴尺寸(cross size)。
min-height 与 min-width 属性初始值将为 0。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写,描述弹性项目的整体的伸缩性
CSS属性flex规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性,用来设置flex-grow
, flex-shrink
与flex-basis
。
大多数情况下,开发者需要将flex
设置为auto
,initial
,none
,或一个无单位正数
- auto
元素会根据自身的宽度与高度来确定尺寸,但是会自行伸长以吸收flex容器中额外的自由空间,也会缩短至自身最小尺寸以适应容器。这相当于将属性设置为 "flex: 1 1 auto". - initial
属性默认值, 元素会根据自身宽高设置尺寸。它会缩短自身以适应容器,但不会伸长并吸收flex容器中的额外自由空间来适应容器 。相当于将属性设置为"flex: 0 1 auto"。 - none
元素会根据自身宽高来设置尺寸。它是完全非弹性的:既不会缩短,也不会伸长来适应flex容器。相当于将属性设置为"flex: 0 0 auto"。
参考
flex布局学习总结的更多相关文章
- flex 布局学习
flex 布局学习 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联 ...
- CSS flex 布局学习笔记
写在前面 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. 采用 Flex 布局的元素 ...
- Flex布局学习笔记
任何元素都可以使用Flex布局,包括行内元素 display: flex; display: inline-flex使用Flex布局之后,子元素的float, clear, vertical-alig ...
- flex布局学习
教程来自阮一峰的flex布局教程实例篇 容器五大属性: flex-direction:容器内项目的排列方向 (1)row:横向从左往右排列(默认) (2)row-reverse:横向从右往左排列 (3 ...
- Flex 布局学习笔记
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- FreeMusic项目优化(一)——flex布局学习记录
参考博客:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html flex布局是w3c于09年提出的,用于简便,整洁,响应式地解决布局问题的手 ...
- 前端flex布局学习笔记
flex布局,即为弹性布局,其为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局. eg:.box{ display:flex: } 行内元素也可以使用flex布局. 注意:设置flex布 ...
- flex布局学习总结--阮一峰
基本概念: 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器".它的所有子元素自动成为容器成员,称为 Flex 项目(flex it ...
- Flex布局【弹性布局】学习
先让我们看看在原来的学习中遇到的问题 之前在软件工程的大作业中,自己从零开始学习如何开发一个网站,从页面,到后台,当然数据库是大二的必修课 在学习如何编写一个静态页面的时候,完全是自学,自己摸索,所以 ...
随机推荐
- Java实现Sybase数据库连接
Java实现Sybase数据库连接 需要的jar包:jconn4.jar: Java代码: /** * @Title: getConnSybase * @Description: * @param * ...
- 前端开发环境全面配置 --- mac OS
Mac 开发配置 brew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install ...
- Codeforces 788A Functions again - 贪心
Something happened in Uzhlyandia again... There are riots on the streets... Famous Uzhlyandian super ...
- ArrayList初始化的4种方法
In the last post we discussed about class ArrayList in Javaand it’s important methods. Here we are s ...
- 理解 python 中__name__ = '__main__' 的作用
很多新手刚开始学习python的时候经常会看到python 中__name__ = \'__main__\' 这样的代码,可能很多新手一开始学习的时候都比较疑惑,python 中__name__ = ...
- ubuntu下转换flv格式为mp4格式
一.环境 ubuntu 16.04 二.安装工具 sudo apt install libav-tools 三.开始转换 avconv -i input.flv -codec copy output. ...
- 如何修改bootstrap模态框的backdrop蒙版区域的颜色?
参考地址: http://www.cnblogs.com/9miao/p/4988196.html 蒙板样式实现: 大家或许注意到了,在做模态弹出窗时,底部常常会有一个透明的黑色蒙层效果:在Boots ...
- Spring Cloud微服务体系搭建
前期架构设计图: 参考博文: Eureka相关: Eureka注册与发现(高可用注册中心.注册服务.Feign服务调用):https://blog.csdn.net/qq_32529383/artic ...
- Excel编程的基本概念
http://wenku.baidu.com/link?url=b3RZzH4KILFWbysnenCvXwiFFkyZqkxk8bvOMy1T7xW54MeGL1WHivGvyqxgI3yFXvY6 ...
- [luogu2119]魔法阵 NOIP2016T4
很好的一道数学推导题 45分做法 $O(N^4)$暴力枚举四个材料 55分做法 从第一个约束条件可得到所有可行答案都是单调递增的,所以可以排序一遍,减少枚举量,可以拿到55分 100分做法 首先可以发 ...