重新总结flex布局(flex,flex-direction,justify-content,align-items,flex-wrap,align-self)
1、flex,主要就是按比例分配。(例如:两个div的flex:1,就大小相等)
.box1{
flex:1;
background-color: red;
}
.box2{
flex:1;
background-color: blue;
}
2、flex-direction,几种排序的方式。
row: child水平方向排列
column: child竖直方向排列(默认)
row-reverse: child水平方向反向排列
column-reverse: child竖直方向反向排列
3、justify-content,几种横向内容排序的方式。
flex-start: child对齐主轴的起点(默认)
flex-end: child对齐主轴的终点
center: child居中对齐主轴
space-between: child在主轴方向相邻child等间距对齐,首尾child与父容器对齐
space-around: child在主轴方向相邻child等间距对齐,首尾child与父容器的间距相等且为相邻child间距的一半
space-evenly: child在主轴方向均匀分布。相邻间距与首尾间距相等
4、align-items,几种竖向内容排序的方式。
flex-start: child对齐副轴起点(默认)
flex-end: child对齐副轴终点
center: child居中对齐副轴
stretch: child为弹性布局时(未设置副轴方向的大小或者为auto),拉伸对齐副轴
baseline: 有文本存在时,child在副轴方向基于第一个文本基线对齐
5、flex-wrap,换行与不换行。
nowrap: 不换行(默认)
wrap: 自动换行
6、align-self,个别child的特别竖向排序方式。(属性名和align-items一样)
重新总结flex布局(flex,flex-direction,justify-content,align-items,flex-wrap,align-self)的更多相关文章
- flex布局 (引用阮一峰老师的flex布局-语法篇)
一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. .box ...
- 在移动端中的flex布局
flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局, 弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...
- flex布局学习总结
最近项目主要是小程序,小程序里面的布局主要采用flex布局,之前对flex 布局只是稍作了解,总结下flex 布局的常用套路 容器 Flex是Flexible Box的缩写,意为"弹性布局& ...
- 理解flex布局
我们传统的布局方式是基于在盒子模型下的,依赖于display属性的,position属性的或者是float属性的,但是在传统的布局上面并不好布局; 比如我们想让某个元素垂直居中的话,我们常见的会让其元 ...
- 关于基本布局之——Flex布局
Flex布局 1.Flex为"Flexible Box"的简称,即为弹性布局,可作用于任何容器上.给div这类块状元素元素设置display:flex或者给span这类内联元素设置 ...
- flex布局应用于踩坑
一.预告 本文不是一篇入门的文章所有请符合以下条件的战斗人员绕道: 1.初学前端,对前端的传统布局还不是很熟悉的人 2.后端人员对前端不打算深入学习的同学 二.开篇 flex布局原本是好几个月前就一直 ...
- Flex布局【弹性布局】学习
先让我们看看在原来的学习中遇到的问题 之前在软件工程的大作业中,自己从零开始学习如何开发一个网站,从页面,到后台,当然数据库是大二的必修课 在学习如何编写一个静态页面的时候,完全是自学,自己摸索,所以 ...
- css flex布局详解
来源:https://blog.csdn.net/liveinmylife/article/details/51838939 1,flex布局是个什么东西? 官方说法:Flex是Flexible Bo ...
- flex布局应用与踩坑
一.预告 本文不是一篇入门的文章所有请符合以下条件的战斗人员绕道: 1.初学前端,对前端的传统布局还不是很熟悉的人 2.后端人员对前端不打算深入学习的同学 二.开篇 flex布局原本是好几个月前就一直 ...
- 使用flex布局调换两个按钮的位置
组件用的时antd的Modal组件,里面的按钮需要调换一下位置 今天发现用flex布局非常方便,代码如下: display: flex; justify-content: center; flex-f ...
随机推荐
- csu 1769(数学)
1769: 想打架吗?算我一个!所有人,都过来!(3) Time Limit: 2 Sec Memory Limit: 128 MBSubmit: 262 Solved: 76[Submit][S ...
- gtk+学习笔记(二)
如何创建一个按钮呢,直接贴代码把,有详细的注释. #include<gtk/gtk.h> gint data_count=; void on_button_clicked (GtkWidg ...
- [你必须知道的.NET]第二十三回:品味细节,深入.NET的类型构造器
发布日期:2008.11.2 作者:Anytao © 2008 Anytao.com ,Anytao原创作品,转贴请注明作者和出处. 说在,开篇之前 今天Artech兄在<关于Type Init ...
- 「Ionic」WebStorm的使用錯誤-
前言:遇到這個錯誤,不要慌張,搶按照濤叔下面的方式處理就可以了. 1.Couldn't find ionic.config.json file. Are you in an Ionic project ...
- SGU 206. Roads
206. Roads time limit per test: 0.5 sec. memory limit per test: 65536 KB input: standard output: sta ...
- DotNetOpenAuth实践之Webform资源服务器配置
系列目录: DotNetOpenAuth实践系列(源码在这里) 上篇我们讲到WebApi资源服务器配置,这篇我们说一下Webform下的ashx,aspx做的接口如何使用OAuth2认证 一.环境搭建 ...
- ajax json 学习笔记
json = { } JSON 字符串必须使用双引号,单引号会出现错误 三种类型: 简单值:字符串.数值.布尔值.null 对象:无序的键值对儿 数组:有序的值列表 解析:JSON.eval() ...
- 用php写的一个猜数字的程序
写一个php的猜数字的小程序,提高自己对php的熟悉程度. <?php $count=rand(0,100); $number = (isset($_POST['number'])) ? $_P ...
- 【数学】At Coder 091 D题
[深夜题解] 题目链接:https://arc091.contest.atcoder.jp/tasks/arc091_b 题目大意:给出两个正整数N.K,找出所有的不大于N的正整数对(a,b)使b%a ...
- 简单机器学习人脸识别工具face-recognition python小试,一行代码实现人脸识别
摘要: 1行代码实现人脸识别,1. 首先你需要提供一个文件夹,里面是所有你希望系统认识的人的图片.其中每个人一张图片,图片以人的名字命名.2. 接下来,你需要准备另一个文件夹,里面是你要识别的图片.3 ...