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. TCP/IP编程——基于TCP的半关闭

    在TCP服务端和客户端建立连接之后服务端和客户端会分别有两个独立的输入流和输出流,而且相互对应.服务端的输出流对应于客户端的输入流,服务端的输入流对应于客户端的输出流.这是在建立连接之后的状态. 当我 ...

  2. python识别图片生成字符模式

    此python文件来自D7哥, 放在这里备份. 用法 python3 PIL\&argparse.py 1.jpg -o test.txt --width 300 --height 300 p ...

  3. 【python016--序列】

    一.列表,元组和字符串的共同点 --都可以通过索引得到每一个元素 --默认索引值总是从0开始 --可以通过分片的方法得到一个范围内的元素的集合 --有很多共同的操作符(重复操作符,拼接操作符.成员关系 ...

  4. pillow生成验证码

    1.结果 2.安装pillow cmd里进入python,pip install pillow,需要等一段时间 3.代码 from PIL import Image, ImageDraw, Image ...

  5. Manjaro kde 18.0安装与基本配置

    目录 更换源镜像.更新系统 安装搜狗输入法 安装软件 系统配置 最后清理垃圾 首先用Rufus制作启动U盘安装,设置好时间和日期等 更换源镜像.更新系统 排列源(只选清华源mirrors.tuna.t ...

  6. noip模拟【tea】

    tea [题目描述]有n个容量为V的瓶子,第i个瓶子中装着a[i]个单位的tea,使所有瓶子内的tea在不 超过其容量的前提下,非空的瓶子最少.在一个单位时间内,可以同时将多个瓶子中的tea倒入另外多 ...

  7. HDU 1392 Surround the Trees（凸包）题解

    题意:给一堆二维的点,问你最少用多少距离能把这些点都围起来 思路: 凸包: 我们先找到所有点中最左下角的点p1,这个点绝对在凸包上.接下来对剩余点按照相对p1的角度升序排序,角度一样按距离升序排序.因 ...

  8. Difference between ID and control.ClientID OR why use control.ClientID if I can access control through ID

     https://stackoverflow.com/questions/3743582/difference-between-id-and-control-clientid-or-why-use-c ...

  9. 论操作系统的IO

    论事件驱动与异步IO - 简书 https://www.jianshu.com/p/814c7e7c4647

  10. hihoCoder week17 最近公共祖先·三 lca st表

    记录dfs序列,dfn[tot] 记录第tot次访问的节点 然后查两点在dfs序中出现的第一次 id[u] id[v] 然后  找 dep[k] = min( dep[i] ) {i 属于 [id[u ...