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)的更多相关文章

  1. flex布局 (引用阮一峰老师的flex布局-语法篇)

    一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. .box ...

  2. 在移动端中的flex布局

    flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局,  弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...

  3. flex布局学习总结

    最近项目主要是小程序,小程序里面的布局主要采用flex布局,之前对flex 布局只是稍作了解,总结下flex 布局的常用套路 容器 Flex是Flexible Box的缩写,意为"弹性布局& ...

  4. 理解flex布局

    我们传统的布局方式是基于在盒子模型下的,依赖于display属性的,position属性的或者是float属性的,但是在传统的布局上面并不好布局; 比如我们想让某个元素垂直居中的话,我们常见的会让其元 ...

  5. 关于基本布局之——Flex布局

    Flex布局 1.Flex为"Flexible Box"的简称,即为弹性布局,可作用于任何容器上.给div这类块状元素元素设置display:flex或者给span这类内联元素设置 ...

  6. flex布局应用于踩坑

    一.预告 本文不是一篇入门的文章所有请符合以下条件的战斗人员绕道: 1.初学前端,对前端的传统布局还不是很熟悉的人 2.后端人员对前端不打算深入学习的同学 二.开篇 flex布局原本是好几个月前就一直 ...

  7. Flex布局【弹性布局】学习

    先让我们看看在原来的学习中遇到的问题 之前在软件工程的大作业中,自己从零开始学习如何开发一个网站,从页面,到后台,当然数据库是大二的必修课 在学习如何编写一个静态页面的时候,完全是自学,自己摸索,所以 ...

  8. css flex布局详解

    来源:https://blog.csdn.net/liveinmylife/article/details/51838939 1,flex布局是个什么东西? 官方说法:Flex是Flexible Bo ...

  9. flex布局应用与踩坑

    一.预告 本文不是一篇入门的文章所有请符合以下条件的战斗人员绕道: 1.初学前端,对前端的传统布局还不是很熟悉的人 2.后端人员对前端不打算深入学习的同学 二.开篇 flex布局原本是好几个月前就一直 ...

  10. 使用flex布局调换两个按钮的位置

    组件用的时antd的Modal组件,里面的按钮需要调换一下位置 今天发现用flex布局非常方便,代码如下: display: flex; justify-content: center; flex-f ...

随机推荐

  1. csu 1769(数学)

    1769: 想打架吗?算我一个!所有人,都过来!(3) Time Limit: 2 Sec  Memory Limit: 128 MBSubmit: 262  Solved: 76[Submit][S ...

  2. gtk+学习笔记(二)

    如何创建一个按钮呢,直接贴代码把,有详细的注释. #include<gtk/gtk.h> gint data_count=; void on_button_clicked (GtkWidg ...

  3. [你必须知道的.NET]第二十三回:品味细节,深入.NET的类型构造器

    发布日期:2008.11.2 作者:Anytao © 2008 Anytao.com ,Anytao原创作品,转贴请注明作者和出处. 说在,开篇之前 今天Artech兄在<关于Type Init ...

  4. 「Ionic」WebStorm的使用錯誤-

    前言:遇到這個錯誤,不要慌張,搶按照濤叔下面的方式處理就可以了. 1.Couldn't find ionic.config.json file. Are you in an Ionic project ...

  5. SGU 206. Roads

    206. Roads time limit per test: 0.5 sec. memory limit per test: 65536 KB input: standard output: sta ...

  6. DotNetOpenAuth实践之Webform资源服务器配置

    系列目录: DotNetOpenAuth实践系列(源码在这里) 上篇我们讲到WebApi资源服务器配置,这篇我们说一下Webform下的ashx,aspx做的接口如何使用OAuth2认证 一.环境搭建 ...

  7. ajax json 学习笔记

    json = { } JSON 字符串必须使用双引号,单引号会出现错误 三种类型: 简单值:字符串.数值.布尔值.null 对象:无序的键值对儿 数组:有序的值列表 解析:JSON.eval()   ...

  8. 用php写的一个猜数字的程序

    写一个php的猜数字的小程序,提高自己对php的熟悉程度. <?php $count=rand(0,100); $number = (isset($_POST['number'])) ? $_P ...

  9. 【数学】At Coder 091 D题

    [深夜题解] 题目链接:https://arc091.contest.atcoder.jp/tasks/arc091_b 题目大意:给出两个正整数N.K,找出所有的不大于N的正整数对(a,b)使b%a ...

  10. 简单机器学习人脸识别工具face-recognition python小试,一行代码实现人脸识别

    摘要: 1行代码实现人脸识别,1. 首先你需要提供一个文件夹,里面是所有你希望系统认识的人的图片.其中每个人一张图片,图片以人的名字命名.2. 接下来,你需要准备另一个文件夹,里面是你要识别的图片.3 ...