Flex详解

khlbat 发布于2019-08-30 11:16 / 2629人阅读

摘要：之前是怎么布局的文档流负介绍特点块级布局侧重垂直方向行内布局侧重水平方向，布局是与方向无关的布局可以实现空间自动分配自动对齐弹性灵活适用于简单的线性布局，更复杂的布局要交给的布局还没发布用法在父元素上加一个就可以了父元素的属性以下

flex 之前是怎么布局的

normal flow (文档流)

float

position

display inline-block

负maring

flex 介绍

特点：

块级布局侧重垂直方向、行内布局侧重水平方向，flex布局是与方向无关的

flex 布局可以实现空间自动分配、自动对齐（flexible：弹性、灵活）

flex 适用于简单的线性布局，更复杂的布局要交给grid的布局（还没发布）

用法

在父元素上加一个 display：flex 就可以了

// CSS

.parent{
    display: flex; 
    background: #ccc;
}
.parent div{
    width: 100px;
    height: 50px;
    background: palevioletred;
    margin: 15px;
}

flex 父元素的属性

以下属性都写父元素里
以下属性都写父元素里
以下属性都写父元素里

flex-direction  排列方向 (写父级元素里)

里面的子元素默认从左向右排列
从右向左排列
flex-direction：row-reverse

从上往下垂直排列
flex-direction：column

从下往上垂直排列
flex-direction：column-reverse

flex-wrap  换行

不换行
flex-wrap：nowrap

换行
flex-wrap：wrap
（flex-wrap 一般配合 flex-direction 使用）

flex-flow 上面两个的简写

flex-flow：row nowrap

justify-content 主轴方向对齐方式

所有子元素的盒子放在在空间内居中
justify-content:space-between

所有子元素盒子放在中间
justify-content:center

所有子元素盒子都在周围（都在周围）
justify-content:space-around

所有子元素盒子都居左（都居起点）
justify-content:space-start

所有子元素盒子都居右（都居终点）
justify-content:space-end

align-items 侧轴对齐方式（控制子元素对齐方式 父级子级都不要有宽高）

所有子元素以最高的高度为准（默认）
align-items：stretch

所有子元素全都向起点靠 -- 顶对齐
align-items：flex-start

所有子元素全都向终点靠 -- 底对齐
align-items：flex-end

所有子元素全都向起点靠 -- 居中
align-items：flex-center

align-content 多行/列内容对齐方式（用的较少）

把所有子元素靠向起点
align-content：flex-start

把所有子元素靠向终点
align-content：flex-end

把所有子元素平均分配（默认）
align-content：stretch

把空间放在子元素中间
align-content：space-between

把空间放在子元素两边
align-content：space-between

flex 子元素的属性

以下属性都写子元素里
以下属性都写子元素里
以下属性都写子元素里

flex-grow 增长比例（空间过多时）

分配多余空间（进行扩展的量）
flex-grow：1

flex-shrink 收缩比例（空间不够时）

数越大收缩比例越多
flex-shrink：2

flex-basis 默认大小（一般不用）

默认占的大小
flex-basis：300px

flex 上面三个缩写

flex： 1 2 300px;

order 顺序（代替双飞翼）

顺序在第一个（每一个子元素都要写）
order：1

align-self 自身对齐方式

如果父级确定了统一的对齐方式这个元素可让子元素自己选择自己的对齐方式
align-self：center;

推荐网址：
https://www.runoob.com/w3cnot...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114883.html

弹性盒子模型详解

摘要：二弹性盒模型历史弹性盒模型历史英文原版或者查看中文翻译版另外附上标准文档弹性盒模型在过去几年间制定了三版草案规范。给子元素直接添加属性即可七后话以上是本文所有内容，以下是小白我的感慨。一、前言由于W3C在制定弹性盒模型内容有多版草案，在网上浏览了很多视频和文章，版本有新有旧，所以准备写一篇关于弹性盒模型的文章，一是辅助自己学习，二是帮忙其他前端学习者更容易地弹性盒模型。二、弹性盒...

rozbo 2019-08-28 18:27 评论0 收藏0
弹性布局（display:flex;）属性详解

摘要：设为布局以后，子元素的和属性将失效。二基本概念采用布局的元素，称为容器，简称容器。它的所有子元素自动成为容器成员，称为项目，简称项目。如果项目只有一根轴线，该属性不起作用。四项目的属性注项目属性的全面理解较为复杂，可以参考文章一、Flex布局-前言 Flex是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性,旨在提供一个更有效地布局、对齐方式，并且能够使容...

wangshijun 2019-08-30 15:55 评论0 收藏0
FlexBox 布局详解

摘要：很久没有写博客了，这里把之前学习布局的一篇笔记整理了一下。其在文档流中的直接子元素将成为。子元素在容器内排列的方向称为主轴，跟主轴垂直的方向称为辅轴。很久没有写博客了，这里把之前学习 flex 布局的一篇笔记整理了一下。发布到博客上。赶一个五月的末班车吧。还是得坚持啊!! flex 弹性布局FlexBox 可控制子元素: 水平或垂直排成一行控制子元素的对齐方式控制子元素的高度／...

incredible 2019-08-29 12:42 评论0 收藏0
FlexBox 布局详解

摘要：很久没有写博客了，这里把之前学习布局的一篇笔记整理了一下。其在文档流中的直接子元素将成为。子元素在容器内排列的方向称为主轴，跟主轴垂直的方向称为辅轴。很久没有写博客了，这里把之前学习 flex 布局的一篇笔记整理了一下。发布到博客上。赶一个五月的末班车吧。还是得坚持啊!! flex 弹性布局FlexBox 可控制子元素: 水平或垂直排成一行控制子元素的对齐方式控制子元素的高度／...

you_De 2019-08-01 16:57 评论0 收藏0