Flex 布局常见的几种方式

April 发布于2019-08-29 15:19 / 2835人阅读

摘要：之前的布局方式正常流或叫文档流负布局特点块级元素侧重垂直方向行内布局侧重水平方向，布局是与方向无关的。

flex 之前的布局方式

normal flow（正常流或叫文档流）

float + clear

position relative + absolute

display inline-block

负margin

flex 布局特点

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

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

flex 适用于简单的线性布局，更复杂的要交给gird 布局

flex container的六大属性：

属性	含义
flex-direction	方向
flex-wrap	换行
flex-flow	上面两个的简写
justify-content	主轴方向对齐方式
align-items	侧轴对齐方式
align-content	多行/列内容对齐方式（用的较少）

解释：
flex-direction：
inherit 继承
initial 起始
row(默认) 一行展示
row-reverse 反向一行
column 一列排列
column-reverse 反向一列排列

flex-wrap：
nowrap(默认) 不换行
wrap 换行

justify-content：
space-between 多的空间放在所有元素中间
space-around 多的空间放在所有元素周围
flex-start 所有元素往主轴的起点靠
flex-end 所有元素往主轴的终点靠
center 所有元素往主轴的中间靠

align-items：
stretch(默认) 把所有元素伸开，和最高的那个元素对齐
flex-start 所有元素往侧轴的起点靠，不要伸开
flex-end 所有元素往侧轴的终点靠，不要伸开
center 所有元素往侧轴的中间靠，不要伸开

align-content：多行才有用，和justify-content用法差不多，只有一行的时候align-content没有任何效果。

flex item的属性

属性	含义
flex-grow	增长比例(空间过多时)
flex-shrink	收缩比例(空间不够时)
flex-basis	默认大小(一般不用)
flex	上面三个的缩写
order	顺序(代替双飞翼)
align-self	自身的对齐方式，可以让每个子元素有自己的对齐方式

常见的一些布局方式：
1、手机页面布局：上中下三栏，中间内容很多，高度自适应，上下高度固定。

2、产品列表布局：

3、简单的PC页面布局：

4、完美居中布局：


    


    
        
            完美居中完美居中完美居中

            完美居中完美居中

            完美居中

            完美居中

服务器托管海外云主机 js继承的几种方式服务器请求的几种方式 java创建对象的几种方式最基本的几种

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

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

面试常见问题——垂直居中的几种方法

摘要：前几天面试，被问到两次，没答好，找到这篇文章收藏学习一下，来自这里做手机的页面，经常会遇到需要垂直居中的情况，这里把常用的垂直居中的几种方法整理下。（前几天面试，被问到两次，没答好，找到这篇文章收藏学习一下，来自这里）做手机的页面，经常会遇到需要垂直居中的情况，这里把常用的垂直居中的几种方法整理下。结构我是垂直居中元素方法1：dispaly:table-cel...

Prasanta 2019-08-28 18:05 评论0 收藏0
网页设计中分栏布局的几种实现方案

摘要：在网页设计中，分栏布局是常用的布局手法，一般有两栏布局，三栏布局。这其中又以部分栏固定，部分栏自适应的方式最为常见。下面我们先以常见的三栏布局开始，描述一下常用的几种实现方案。在网页设计中，分栏布局是常用的布局手法，一般有两栏布局，三栏布局。这其中又以部分栏固定，部分栏自适应的方式最为常见。下面我们先以常见的三栏布局开始，描述一下常用的几种实现方案。三栏布局三栏布局最常见的就是左...

AlphaGooo 2019-08-01 17:36 评论0 收藏0
网页设计中分栏布局的几种实现方案

摘要：在网页设计中，分栏布局是常用的布局手法，一般有两栏布局，三栏布局。这其中又以部分栏固定，部分栏自适应的方式最为常见。下面我们先以常见的三栏布局开始，描述一下常用的几种实现方案。在网页设计中，分栏布局是常用的布局手法，一般有两栏布局，三栏布局。这其中又以部分栏固定，部分栏自适应的方式最为常见。下面我们先以常见的三栏布局开始，描述一下常用的几种实现方案。三栏布局三栏布局最常见的就是左...

jk_v1 2019-08-29 13:27 评论0 收藏0
图标文字对齐的几种常见方法

摘要：总结关于使用哪一种方法都是可以选择的，但是第一种方法希望大家可以认真去思考下能收获很多关于内联元素对齐的知识。引言图标文字对齐在平时的工作中是最常见的了，最早学习时候一般都是用vertical-align，但是由于inline-block元素在和文字对齐时候的一些很麻烦的表现（见上一篇文章），大家应该都经历过那种行框高度高出几px的情形。简单暴力的话还可以用absolute定位方法...

caige 2019-08-30 15:54 评论0 收藏0
实现三栏布局的几种方法

摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...

golden_hamster 2019-08-02 11:55 评论0 收藏0