几种常见的flex布局
1,水平等距排列、俩端对齐、垂直方向居顶对齐
html:
<div class="container flex">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
css:
.container{
width: 1000px;
margin: 100px auto;
border: #333 solid 1px;
height: 500px;
}
.div1{
width: 100px;
height: 120px;
background-color: yellowgreen;
}
.div2{
width: 200px;
height: 150px;
background-color: salmon;
}
.div3{
width: 160px;
height: 200px;
background-color: bisque;
}
.flex{
display: flex;
justify-content: space-between;
}
效果:
2,水平等距排列、俩端对齐、垂直方向居中对齐
html:
<div class="container flex">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
css:
.container{
width: 1000px;
margin: 100px auto;
border: #333 solid 1px;
height: 500px;
}
.div1{
width: 100px;
height: 120px;
background-color: yellowgreen;
}
.div2{
width: 200px;
height: 150px;
background-color: salmon;
}
.div3{
width: 160px;
height: 200px;
background-color: bisque;
}
.flex{
display: flex;
justify-content: space-between;
align-items: center;
}
效果:
3,水平等距排列、俩端对齐、垂直方向居底对齐
html:
<div class="container flex">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
css:
.container{
width: 1000px;
margin: 100px auto;
border: #333 solid 1px;
height: 500px;
}
.div1{
width: 100px;
height: 120px;
background-color: yellowgreen;
}
.div2{
width: 200px;
height: 150px;
background-color: salmon;
}
.div3{
width: 160px;
height: 200px;
background-color: bisque;
}
.flex{
display: flex;
justify-content: space-between;
align-items: flex-end;
}
效果:
4,水平排列、垂直方向居中对齐
html:
<div class="container flex">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
css:
.container{
width: 1000px;
margin: 100px auto;
border: #333 solid 1px;
height: 500px;
}
.div1{
width: 100px;
height: 120px;
background-color: yellowgreen;
}
.div2{
width: 200px;
height: 150px;
background-color: salmon;
}
.div3{
width: 160px;
height: 200px;
background-color: bisque;
}
.flex{
display: flex;
align-items: center;
}
效果:
5,水平居中排列、垂直方向居中对齐
html:
<div class="container flex">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
css:
.container{
width: 1000px;
margin: 100px auto;
border: #333 solid 1px;
height: 500px;
}
.div1{
width: 100px;
height: 120px;
background-color: yellowgreen;
}
.div2{
width: 200px;
height: 150px;
background-color: salmon;
}
.div3{
width: 160px;
height: 200px;
background-color: bisque;
}
.flex{
display: flex;
justify-content: center;
align-items: center;
}
效果:
6,垂直等距排列、俩端对齐、水平方向居中对齐
html:
<div class="container flex">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
css:
.container{
width: 1000px;
margin: 100px auto;
border: #333 solid 1px;
height: 500px;
}
.div1{
width: 100px;
height: 120px;
background-color: yellowgreen;
}
.div2{
width: 200px;
height: 150px;
background-color: salmon;
}
.div3{
width: 160px;
height: 200px;
background-color: bisque;
}
.flex{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
效果:
7,垂直等距排列、俩端对齐、水平方向居左对齐
html:
<div class="container flex">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
css:
.container{
width: 1000px;
margin: 100px auto;
border: #333 solid 1px;
height: 500px;
}
.div1{
width: 100px;
height: 120px;
background-color: yellowgreen;
}
.div2{
width: 200px;
height: 150px;
background-color: salmon;
}
.div3{
width: 160px;
height: 200px;
background-color: bisque;
}
.flex{
display: flex;
flex-direction: column;
justify-content: space-between;
}
效果:
8,垂直排列、水平方向居中对齐
html:
<div class="container flex">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
css:
.container{
width: 1000px;
margin: 100px auto;
border: #333 solid 1px;
height: 500px;
}
.div1{
width: 100px;
height: 120px;
background-color: yellowgreen;
}
.div2{
width: 200px;
height: 150px;
background-color: salmon;
}
.div3{
width: 160px;
height: 200px;
background-color: bisque;
}
.flex{
display: flex;
flex-direction: column;
align-items: center;
}
效果:
几种常见的flex布局的更多相关文章
- 几种常见的CSS布局
本文概要 本文将介绍如下几种常见的布局: 其中实现三栏布局有多种方式,本文着重介绍圣杯布局和双飞翼布局.另外几种可以猛戳实现三栏布局的几种方法 一.单列布局 常见的单列布局有两种: header,co ...
- 几种常见的css布局_l流体布局、圣杯布局、双飞翼布局
1.流体布局: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <ti ...
- flex布局全解析
前言 很长一段时间, 我知道有flex这个布局方式, 但是始终没有去学它. 3点原因: 感觉还比较新, 担心兼容性不好. 普通的布局方式能满足我的绝大多数需求. 好像蛮复杂的. 最近由于开发需要, 学 ...
- CSS学习笔记:flex布局
目录 一.Flex布局简介 1. Flex布局的主要作用 2. Flex布局应用场景 二.Flex布局的使用 1. Flex布局的两种相关元素 2. 父项属性 2.1 flex- direction ...
- 几种常见布局的flex写法
flex布局目前基本上兼容主流的浏览器,且实现方式简单.我整理了flex的一些知识点,并且总结归纳了几种常见布局的flex写法 flex基础知识点 flex-grow和flex-shrink相关计算 ...
- es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- 四种常见的APP分类界面布局设计案例学习
相信各位对于APP设计,已经很熟练啦.如何在熟练的基础上提高我们界面的优美度,或者是进行APP界面的迭代设计. 重构APP设计布局是我们必须要经历的一个过程. 在之前,学习UI设计的时候,经常要接触到 ...
- flex布局常见用法小结
1,display:flex 这个在父容器中声明: 2,flex-direction:row / column 默认为横向,也在父容器中设置,定义flex布局的主轴方向:一条轴为主轴,那么另一条轴自然 ...
- [Android]Android之四种常见布局
一个丰富的界面总是要由很多个控件组成的,那我们如何才能让各个控件都有条不紊地 摆放在界面上,而不是乱糟糟的呢?这就需要借助布局来实现了.布局是一种可用于放置很 多控件的容器,它可以按照一定的规律调整内 ...
随机推荐
- leetcode 1078 Occurrences After Bigram
lc1078 Occurrences After Bigram trim().split()将原字符串转换成words数组 依次匹配first和second,若两者都能匹配上,则下一个单词为third ...
- 第一个入驻阿里云自营心选商城,如今它已经是营收过亿的SaaS独角兽
淘宝心选.网易严选.小米有品...越来越多的企业电商自有品牌围绕“低价好物”大做文章,用创新赢得了市场.作为To B从业人员,不由思考:C端的成功是否可以复制在B端? 伴随着互联网下半场的到来,云计算 ...
- 关于mybatis-config.xml文件的基础解释
今天是我第一天落户博客园,想一想从mybatis框架开始写起吧.mybatis框架与Hibernate框架相比来说,专注于SQL语句,对SQL语句的要求比较高吧. 我觉得,对于mybatis框架来说, ...
- Jupyter notebook使用matplotlib不出图解决办法
1.在jupyter notebook使用plot的时候没有显示图像2.在命令行知道需要使用ipython --pylab进入ipython环境才能做出图像,jupyter notebook该怎么设置 ...
- 部分树形DP的优化
ural1018. Binary Apple Tree 题目大意 有一棵n个节点的树,树上每个节点有一个值,选择m个节点使这些节点值的和最大 要求:如果选当前节点,则必须选它的父节点 解法: 我们设d ...
- UVA11722 Jonining with Friend
Joining with Friend You are going from Dhaka to Chittagong by train and you came to know one of your ...
- 【转载】TSN简介及相关资源
原文:https://blog.csdn.net/u012692537/article/details/86188392 一.简介 1.1 什么是TSN TSN(Time Sensitive Netw ...
- Django项目:CRM(客户关系管理系统)--26--18PerfectCRM实现King_admin搜索关键字
search_fields = ('name','qq',) 登陆密码设置参考 http://www.cnblogs.com/ujq3/p/8553784.html search_fields = ( ...
- bzoj 1123 [POI2008]BLO——点双连通分量
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1123 点双连通分量缩点,然后各种各样. 结果不会写了.比如新连边.记录一个点是割点缩成的点还 ...
- 20190814-A Second
一秒,或是,第二次? 这考试也太频繁了吧…… 考试过程: 看三道题. T1没思路. 然后去厕所清醒了一下. 在厕所的时候,突然想到可以离散化. 于是就这么搞了. 然后去写T2. T2好像是数学题. 于 ...