CSS——flex弹性布局

创建表单，加入常用的表单控件

<form><input type="email" name='email'><button type="submit">提交</button>
</form>

两个空间都是行内快元素，默认会排列在一行，浏览器在渲染的时候会带有默认的间隔，使用flex布局可以清除控件之间的间隔

form{display: flex;/*设置表单为弹性布局*/
}

如果我们希望指定的控件可以占据所在行的所有剩余空间，可以拉伸该控件

input{flex-grow: 1; /*默认为0，不拉伸；设置为1，拉伸宽度*/
}

弹性布局不改变容器的宽度，但是会改变容器的高度，当我们在button中插入一张图片时，input控件的高度也会随之改变

<form><input type="email" name='email'><button type="submit"><img src="../../build/logo.png"></button>
</form>

在控件中使用align-self可以改变容器自身的排列

input{flex-grow: 1; /*默认为0，不拉伸；设置为1，拉伸宽度*/align-self: center; /*flex-start在上面 flex-end在下面 center在中间 stretch为拉伸高度（默认）*/
}

如果想设置整个容器元素的align-self值，可以在容器中使用align-item值

form{display: flex;/*设置表单为弹性布局*/align-items: center;/*设置全部的元素align-self为center*/
}

flex布局换行，可使用flex-wrap属性

flex-wrap: wrap;

改变容器的排列方向以及是否自动换行

flex-flow: row wrap;
/* 等同于 */
flex-wrap: wrap;
flex-direction: row;

设置元素水平垂直对齐，当父元素设置为（align-items: stretch;），子元素没有设置高度的情况下，子元素会均分父容器的高度

display: flex;
justify-content: center;  /* 主轴（默认为水平）对齐 */
align-items: center;      /* 纵轴（默认为垂直）对齐 */

当父容器水平方向有空隙的时候，子元素默认均分空隙，设置flex-grow或者flex-shrink属性可以设置均分比例，默认为0

.container{display:flex;justify-content:space-between;
}
.container .div1{flex-grow:1;
}
.container .div2{flex-grow:2;
}/* div1:div2 宽度= 1:2 *//*  当容器设置不换行，宽度超过父容器时 */
.container .div2{flex-shrink: 0; /* 该容器不收缩，其他的等比例收缩*/
}/* flex-basis 设置元素在主轴上的宽度 相当于width*/
.container .div2{flex-basis: 60rpx;
}

flex属性相当于flex-grow、flex-shrink、flex-basis三个属性的缩写

.container .div{/* flex-grow: 1; *//* flex-shrink: 1; *//* flex-basis: 60rpx; */flex: 1 1 60rpx;
}

order属性可以改变元素的位置，相比其他元素的order值越小，越靠前

.container div1{order:2;
}
.container div2{order:1;
}
/* 类名为div2的元素排在类名为div1元素的前面*/

CSS——flex弹性布局相关推荐

HTML+CSS flex弹性布局
flex布局原理 flex是flexible box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局. 当我们为父盒子设置为flex ...
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弹性布局

CSS——flex弹性布局相关推荐

最新文章

热门文章