最近项目主要是小程序,小程序里面的布局主要采用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-shrinkflex-basis

大多数情况下,开发者需要将flex设置为autoinitialnone,或一个无单位正数

  1. auto

    元素会根据自身的宽度与高度来确定尺寸,但是会自行伸长以吸收flex容器中额外的自由空间,也会缩短至自身最小尺寸以适应容器。这相当于将属性设置为 "flex: 1 1 auto".
  2. initial

    属性默认值, 元素会根据自身宽高设置尺寸。它会缩短自身以适应容器,但不会伸长并吸收flex容器中的额外自由空间来适应容器 。相当于将属性设置为"flex: 0 1 auto"。
  3. none

    元素会根据自身宽高来设置尺寸。它是完全非弹性的:既不会缩短,也不会伸长来适应flex容器。相当于将属性设置为"flex: 0 0 auto"。

参考

flex布局学习总结的更多相关文章

  1. flex 布局学习

    flex 布局学习 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联 ...

  2. CSS flex 布局学习笔记

    写在前面 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. 采用 Flex 布局的元素 ...

  3. Flex布局学习笔记

    任何元素都可以使用Flex布局,包括行内元素 display: flex; display: inline-flex使用Flex布局之后,子元素的float, clear, vertical-alig ...

  4. flex布局学习

    教程来自阮一峰的flex布局教程实例篇 容器五大属性: flex-direction:容器内项目的排列方向 (1)row:横向从左往右排列(默认) (2)row-reverse:横向从右往左排列 (3 ...

  5. Flex 布局学习笔记

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. FreeMusic项目优化(一)——flex布局学习记录

    参考博客:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html flex布局是w3c于09年提出的,用于简便,整洁,响应式地解决布局问题的手 ...

  7. 前端flex布局学习笔记

    flex布局,即为弹性布局,其为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局. eg:.box{ display:flex: } 行内元素也可以使用flex布局. 注意:设置flex布 ...

  8. flex布局学习总结--阮一峰

    基本概念:   采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器".它的所有子元素自动成为容器成员,称为 Flex 项目(flex it ...

  9. Flex布局【弹性布局】学习

    先让我们看看在原来的学习中遇到的问题 之前在软件工程的大作业中,自己从零开始学习如何开发一个网站,从页面,到后台,当然数据库是大二的必修课 在学习如何编写一个静态页面的时候,完全是自学,自己摸索,所以 ...

随机推荐

  1. Java实现Sybase数据库连接

    Java实现Sybase数据库连接 需要的jar包:jconn4.jar: Java代码: /** * @Title: getConnSybase * @Description: * @param * ...

  2. 前端开发环境全面配置 --- mac OS

    Mac 开发配置 brew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install ...

  3. Codeforces 788A Functions again - 贪心

    Something happened in Uzhlyandia again... There are riots on the streets... Famous Uzhlyandian super ...

  4. ArrayList初始化的4种方法

    In the last post we discussed about class ArrayList in Javaand it’s important methods. Here we are s ...

  5. 理解 python 中__name__ = '__main__' 的作用

    很多新手刚开始学习python的时候经常会看到python 中__name__ = \'__main__\' 这样的代码,可能很多新手一开始学习的时候都比较疑惑,python 中__name__ = ...

  6. ubuntu下转换flv格式为mp4格式

    一.环境 ubuntu 16.04 二.安装工具 sudo apt install libav-tools 三.开始转换 avconv -i input.flv -codec copy output. ...

  7. 如何修改bootstrap模态框的backdrop蒙版区域的颜色?

    参考地址: http://www.cnblogs.com/9miao/p/4988196.html 蒙板样式实现: 大家或许注意到了,在做模态弹出窗时,底部常常会有一个透明的黑色蒙层效果:在Boots ...

  8. Spring Cloud微服务体系搭建

    前期架构设计图: 参考博文: Eureka相关: Eureka注册与发现(高可用注册中心.注册服务.Feign服务调用):https://blog.csdn.net/qq_32529383/artic ...

  9. Excel编程的基本概念

    http://wenku.baidu.com/link?url=b3RZzH4KILFWbysnenCvXwiFFkyZqkxk8bvOMy1T7xW54MeGL1WHivGvyqxgI3yFXvY6 ...

  10. [luogu2119]魔法阵 NOIP2016T4

    很好的一道数学推导题 45分做法 $O(N^4)$暴力枚举四个材料 55分做法 从第一个约束条件可得到所有可行答案都是单调递增的,所以可以排序一遍,减少枚举量,可以拿到55分 100分做法 首先可以发 ...