1.order

order定义项目的排列顺序，值越小越靠前第一个值默认为0

</div>

2.align-content

当设置flex-wrap：wrap（默认）时

出现换行后为多根轴线

align-content定义多根轴线的对齐方式

align-content: space-evenly;

3.水平处置居中

margin: 0 auto;(只能实现块元素的水平居中)

justify-content: center;主轴方向居中

align-items: center; 交叉轴方向居中

4.flex-grow

flex-grow定义项目的放大比例，默认为0，即使存在剩余空间也不放大。主要作用是分配剩余空间

flex-grow: 1;

表示把剩余的空间都充满

如果每个项目都设置flex-grow：1 那么每个项目会平均分配相同的宽度

5.flex-shrink

flex-shrink: 0;

flex-shrink用来表示是否被压缩，默认是1.表示被亚索，如果改成0则表示保持设置的尺寸，即不

被压缩

☆如果每个都不被压缩，则会超出父元素

6.flex-basis

flex-basis优先级比width高，同时设置只会展示basis的宽度

flex:flex-grow flex-shrink flex-basis

flex是复合属性，由上面三个属性组成

CSS-flex弹性布局补充相关推荐

HTML+CSS flex弹性布局
flex布局原理 flex是flexible box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局. 当我们为父盒子设置为flex ...
CSS——flex弹性布局
创建表单,加入常用的表单控件 <form><input type="email" name='email'><button type="su ...
CSS 的弹性布局(flex) ，是什么？
一.弹性布局是什么? 元素根据窗口大小变化而自动伸长或缩短,使得整个页面格式保持不变. 二.怎么使用? 1.使用方法 /* 1.父元素中增加 display 属性:*/ display: flex; ...
前端之网页三剑客Css之弹性布局Flex作用
一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. <div cl ...
页面布局 - flex弹性布局
flex弹性布局 html: <!DOCTYPE html> <html><head><meta charset="utf-8" /> ...
移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
微信小程序开发（三)——IE盒子，Flex弹性布局，色子六面
目录 ie盒子模型 Flex弹性布局三大特性: 块元素和内联元素的转换 background-image背景图片尺寸单位rpx 定位练习:色子的六面 ie盒子模型盒子模型是css中一个重要的概 ...
移动端基础（2）—— flex弹性布局
一.flex弹性布局 flexible-box-layout 弹性盒式模型,它能更加高效的控制元素的对齐.排列,更重要的是能够自动计算布局内元素的尺寸,无论这个元素的尺寸是固定的还是动态的. 父元素( ...
flex弹性布局教程-09-容器属性flex-flow
本节目标掌握flex-flow的使用,flex-flow是flex-direction和flex-wrap的合集. 掌握上左右下的布局编写技巧. 内容摘要本篇介绍了容器属性 flex-flow,是 ...
HTML中用弹性布局设置位置,HTML的flex弹性布局
flex 布局概述 1. flex 是什么flex 是 Flexible Box 的缩写,意为弹性布局 flex 2009 年就已出现,浏览器兼容性很好,请放心使用 2. flex 解决了什么问题块元 ...

CSS-flex弹性布局补充