1.需要记住的属性和值。

 -------------------------------------------------------------
方向横和纵 flex-direction: row | row-reverse | column | column-reverse;
 -------------------------------------------------------------
 超过怎么办。
flex-wrap: nowrap | wrap | wrap-reverse;
 -------------------------------------------------------------
 以上两个的简写。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
 -------------------------------------------------------------
 justify-content属性定义了项目在主轴上的对齐方式。左对齐,右对齐,中间,两端对齐,空间-环绕。
 justify-content: flex-start | flex-end | center | space-between | space-around;
 -------------------------------------------------------------
 align-items属性定义项目在交叉轴上如何对齐。
 align-items: flex-start | flex-end | center | baseline | stretch;
 -------------------------------------------------------------
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
 ------------------------------------------------------------

2.  CSS3 display:flex和display:box有什么区别

box 是旧属性,已经被flex代替。
flex和box都是伸缩盒,具体细节有区别。
一些浏览器可能只支持box.
由于css3还是讨论稿,所以一些属性可能随时被修改。

3.两边都是150px,中间的线的宽度自适应。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div class="a50"></div>
<div id="children"> </div>
<div class="a50"></div>
</div>
<style>
#app{
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
}
#children{
flex:1;
border: 1px solid black;
}
.a50{
flex: 0 0 150px;
border: 1px solid red;
}
</style>
</body>
</html>

  

4.

5.

6.

 

flex属性的学习的更多相关文章

  1. CSS布局学习(二) - flex属性

    flex属性 定义 flex布局包括最外层的容器和内部的元素,flex属性是内部元素属性.flex属性是flex-grow, flex-shrink, flex-basis三个属性的简写 flex-g ...

  2. css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记

    最近在研究css3的flex.遇到的flex:1;这一块,很是很纠结,flex-grow.flex-shrink.flex-basis始终搞不清,最经搜集了大量的介绍,应该能算是明白了.网上大部分解释 ...

  3. [20190618]日常学习记录(二)-flex属性及vue实战

    早上在看flex属性,总结一下它的优缺点 为什么使用flex, 她和浮动相比,代码更少.浮动要考虑左浮动右浮动,有时还要去清除浮动.flex一行代码就搞定了. 她更灵活,实现平均分配,根据内容大小分配 ...

  4. flex弹性布局学习笔记

    前言 资料来源于网络,本人只是对此作了一下操作,记录于此以便以后查阅.目的在于梳理自己前端凌乱的知识点. 本文根据 Brian Franco 的一个flexbox.scss库来记录 入职新公司前对移动 ...

  5. 小程序flex属性两边边距自适应

    使用flex属性两边边距自适应解决方案   Justify-content:center   文章来源:刘俊涛的博客 地址:http://www.cnblogs.com/lovebing 欢迎关注,有 ...

  6. 详解 Flexible Box 中的 flex 属性

    导读: 弹性盒子是 CSS3 的一种布局模式,一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有适当的行为的布局方式.其中 flex 属性用于指定弹性子元素如何分配空间. flex 属性的值 ...

  7. flex弹性布局学习

    一.介绍 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性.主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支持: ...

  8. flex属性

    一.flex属性的归纳 flex-direction flex-wrap flex-flow justify-content align-items align-content 1.1 flex-di ...

  9. CSS3-flex弹性布局之flex属性

    flex属性 前置

随机推荐

  1. 如何用百度MIP快速搭建体验友好的移动页面

    在读这篇文章之前,请确定你已经了解MIP定义及加速原理.如果不确定的话,可以到MIP官网了解. 改造前期准备和注意事项: 你可以选择直接将原先的移动站点直接改成MIP站,也可以单独再做一套MIP站点与 ...

  2. Windows下将nginx安装为服务运行

    今天看到nginx这个小服务器软件正式版更新到了1.4.2,想玩下它.这个服务器软件虽小,但功能强大,是开源软件,有着良好的性能,被很多个人.企业,甚至大型企业所使用! 由于是在Windows下,所以 ...

  3. @Autowired

    1. Spring框架中进行注入式,使用@Autowired. @Autowired可以对成员变量.方法和构造函数进行标注,来完成自动装配的工作,这里必须明确:@Autowired是根据类型进行自动装 ...

  4. NPOI格式设置1

    using NPOI.SS.UserModel; using NPOI.HSSF.UserModel; //创建Execl IWorkbook hssfworkbook =new HSSFWorkbo ...

  5. Cordova for iOS[ PhoneGap]

    安装这个费了点劲,和早前的PhoneGap有些不同. Cordova支持如下移动操作系统:iOS, Android,ubuntu phone os, Blackberry, Windows Phone ...

  6. Delphi 内存与指针

    源:Delphi 内存与指针 Delphi 的内存操作函数(1): 给字符指针分配内存 Delphi 的内存操作函数(2): 给数组指针分配内存 Delphi 的内存操作函数(3): 给结构体指针分配 ...

  7. mycat入门_介绍与安装

    利用闲暇时间接触了下mycat. 一.介绍 1.概述: 国内最活跃的.性能最好的开源数据库中间件,可以理解为数据库和应用层之间的一个代理组件. 2.作用: 读写分离.分表分库.主从切换. 3.原理: ...

  8. Java中Volatile详解

    当前的Java内存模型下,线程可以把变量保存在本地内存(比如机器的寄存器)中,而不是直接在主存中进行读写.这就可能造成一个线程在主存中修改了一个变量的值,而另外一个线程还继续使用它在寄存器中的变量值的 ...

  9. 在控制台远程连接mysql数据库时,出现ERROR 2049 (HY000)错误

    问题的原因是,你本地的数据库版本过高,而远程的数据库版本低. 解决方法:在连接时加上  --skip-secure-auth 参数就可以了. mysql -h主机 -u用户名 -p密码 --skip- ...

  10. Oracle11g常用数据字典

    转:https://blog.csdn.net/fulq1234/article/details/79760698 Oracle数据字典的名称由前缀和后缀组成,使用_连接,含义说明如下: dba_:包 ...