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. The POM for XXX is invalid, transitive dependencies (if any) will not be available解决方案

    今天,某个开发的环境在编译的时候提示警告The POM for XXX is invalid, transitive dependencies (if any) will not be availab ...

  2. direct加载之ora-39782一例

    近日,我们有个环境在数据加载到oracle的时候出现ora-39782异常,版本是11.2.经google,几乎没有什么先例,因为我们是使用oci直接写的,可见现在还使用oci接口并不多,也或者我们的 ...

  3. fread和fseek的用法

    原味:http://baike.baidu.com/view/656696.htm    http://baike.baidu.com/view/656689.htm fread 功 能: 从一个流中 ...

  4. 原生js封装的获取某一天是当年的第几周方法

    function getWeek(str){ //str格式为yyy-mm-dd //周日归到了本周 var d=new Date(str); var day=d.getDay(); var orig ...

  5. Python3 tkinter基础 Frame bind 鼠标移动事件 实时显示鼠标的位置

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  6. SDOI2017相关分析 线段树

    题目 https://loj.ac/problem/2005 思路 \[ \sum_{L}^{R}{(x_i-x)^{2}} \] \[ \sum_{L}^{R}{(x_i^2-2*x_i*x+x^{ ...

  7. 数论+矩阵快速幂|斐波那契|2014年蓝桥杯A组9-fishers

    标题:斐波那契 斐波那契数列大家都非常熟悉.它的定义是: f(x) = 1 .... (x=1,2) f(x) = f(x-1) + f(x-2) .... (x>2) 对于给定的整数 n 和 ...

  8. P3301 [SDOI2013]方程

    思路 容斥的挺好的练习题 对于第二个条件,可以直接使m减去suma2,使得第二个条件舍去,然后m再减去n,使得问题转化成有n1个变量要满足小于等于某个数的条件,其他的随便取,求整数解的个数 对n1,以 ...

  9. nrf24l01 IRQ一直为高电平

    测试发现发送数据时MCU卡住不动,测试发现卡在了 while(NRF24L01_IRQ!=0); 也就是说管脚IRQ一直是高电平.仔细排查发现nrf24l01处于接收模式,改为发送模式就好了 NRF2 ...

  10. python学习 day018打卡 反射

    本节主要内容: 1.isinstance,type,issubclass 2.区分函数和方法 3.反射(重点) 一.isinstance,type,issubclass issubclass():判断 ...