Flex 布局

作者: levinhax | 来源:发表于2017-08-04 01:51 被阅读0次

Flex 布局,可以简便,完整,响应式的实现各种页面布局

网页布局是CSS中一个重点应用,传统的解决方案是基于盒模型的,它依赖于 标准文档流、浮动布局 和 定位布局。但它在解决一些特殊布局的时候会很不方便,让人很头疼。

Flex 布局

Flex 是 Flexible Box 的缩写,即弹性布局,任何一个容器(块状元素或行内元素)都可以指定为Flex布局。
设为Flex布局以后,子元素的float、clear和vertical-align属性将失效

基本概念

概念图.png

采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。
容器默认存在两根轴,水平轴和垂直的交叉轴。

属性

Flex container 的属性 :
1. display : flex;   // 将这个元素设置为弹性盒子

2. flex-direction :   // 主轴方向,即项目的排列方向
    . row
    . row-reverse
    . column
    . column-reverse
    
3. justify-content :     // 沿主轴的对齐方式
    . flex-start    默认,左对齐
    . flex-end     右对齐
    . center        居中
    . space-between   两端对齐,项目之间的间隔相等
    . space-around     每个项目两侧的间隔相等
    
4. align-items :         // 沿侧轴的对齐方式
    . flex-start       起点对齐
    . flex-end        终点对齐
    . center           中点对齐
    .baseline         项目的第一行文字的基线对齐
    . stretch          默认值,如果项目未设置高度或设为auto,将占满整个容器的高度 
    
5. align-content :     // 子元素中文本沿侧轴的对齐方式(只有一行时无效)
    . flex-start       起点对齐
    . flex-end        终点对齐
    . center           中点对齐
    . space-between   两端对齐,间隔平均
    . space-around     每根轴线两侧相等,轴线之间的间隔比轴线与边框的间隔大一倍
    . stretch          默认值,轴线占满整个侧轴

6. flex-wrap :      // 规定如果一条轴线排不下怎么换行
    . nowrap  默认,不换行
    . wrap      换行,第一行在上面
    . wrap-reverse    换行,第一行在下面 

7. flex-flow       // flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
Flex item 的属性 :
1. flex-growth :      // 伸展值, 默认为0,如果所有的都为1,则等分空间

2. flex-shrink :       // 可接受的压缩值,默认为1,设为0则不缩小

3. flex-basis :        // 元素默认的尺寸值

4. flex :   // 以上三个值按顺序的缩写

5. order :    // 项目的排列顺序。数值越小,排列越靠前,默认为0

6. align-self :   // 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto

示例 :

结构.png 样式.png

效果如下 :

效果.png

该文章同步在 :
CSDN Blog: http://blog.csdn.net/levinhax/article/details/76652783
GitHub Page : https://levinhax.github.io/

相关文章

  • flex布局

    认识flex布局 flex布局(Flexible 布局,弹性布局)开启了flex布局的元素叫flex contai...

  • 初见FLEX

    FLEX布局 一种新的布局方式,flex布局 flex布局与方向无关 flex布局可以实现空间自动分配、自动对齐。...

  • Flex 布局教程

    一、Flex 布局教程:语法篇 Flex 布局教程:语法篇 二、Flex 布局教程:实例篇 Flex...

  • css flex布局详解

    css flex布局详解 css flex布局详解1css flex布局详解2

  • Flex

    阮一峰-Flex布局 阮一峰-Flex布局实例教程 Flex布局 块级元素 行内元素 注意,设为 Flex 布局...

  • flex布局学习笔记

    经典教程 Flex 布局教程:语法篇Flex 布局教程:实例篇flex布局游戏 理解 flex布局实现需要至少两层...

  • 6Flex 布局

    Flex,(Flexible Box),意为"弹性布局"采用 Flex 布局的元素,为 Flex 容器(flex ...

  • css flex

    css flex布局 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称“容器...

  • Flex布局(语法篇)

    一、介绍Flex布局 什么是Flex布局呢?Flex布局:又称弹性布局,它是Flexible Box 的缩写,它为...

  • Day02_flex布局

    一、flex布局介绍: 1、又名Flexible 布局,弹性布局;2、开启了 flex 布局的元素叫 flex c...

网友评论

    本文标题:Flex 布局

    本文链接:https://www.haomeiwen.com/subject/ibgmlxtx.html