flex属性的学习
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属性的学习的更多相关文章
- CSS布局学习（二） - flex属性
flex属性 定义 flex布局包括最外层的容器和内部的元素,flex属性是内部元素属性.flex属性是flex-grow, flex-shrink, flex-basis三个属性的简写 flex-g ...
- css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记
最近在研究css3的flex.遇到的flex:1;这一块,很是很纠结,flex-grow.flex-shrink.flex-basis始终搞不清,最经搜集了大量的介绍,应该能算是明白了.网上大部分解释 ...
- [20190618]日常学习记录(二)-flex属性及vue实战
早上在看flex属性,总结一下它的优缺点 为什么使用flex, 她和浮动相比,代码更少.浮动要考虑左浮动右浮动,有时还要去清除浮动.flex一行代码就搞定了. 她更灵活,实现平均分配,根据内容大小分配 ...
- flex弹性布局学习笔记
前言 资料来源于网络,本人只是对此作了一下操作,记录于此以便以后查阅.目的在于梳理自己前端凌乱的知识点. 本文根据 Brian Franco 的一个flexbox.scss库来记录 入职新公司前对移动 ...
- 小程序flex属性两边边距自适应
使用flex属性两边边距自适应解决方案 Justify-content:center 文章来源:刘俊涛的博客 地址:http://www.cnblogs.com/lovebing 欢迎关注,有 ...
- 详解 Flexible Box 中的 flex 属性
导读: 弹性盒子是 CSS3 的一种布局模式,一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有适当的行为的布局方式.其中 flex 属性用于指定弹性子元素如何分配空间. flex 属性的值 ...
- flex弹性布局学习
一.介绍 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性.主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支持: ...
- flex属性
一.flex属性的归纳 flex-direction flex-wrap flex-flow justify-content align-items align-content 1.1 flex-di ...
- CSS3-flex弹性布局之flex属性
flex属性 前置
随机推荐
- GitHub git 命令思维导图
GitHub git 命令思维导图 拖动图片至浏览器地址栏松手,点击回车看高清大图.
- 如果此表在它的 ChildRelation 集合中不是父表，则不能将关系添加到该集合中。
今天遇到这个问题头都大了,百度上也没找到解决方案,就自己在哪里沉思................ 终于皇天不负有心人,被我解决了! 这是调用ChildRelations.Add(“名字”,“父级”, ...
- js字符串方法、数组方法整理
push 向数组末尾添加一项 返回值为数组的长度: pop 删除数组最后一项: unshift 向数组开头增加一项: shift 删除数组第一项: splice 删除数组中的值:1 splice(n, ...
- P2057 [SHOI2007]善意的投票
思路 简单的最小割模型 最小割的模型就是选出一些边,把点集划分成S和T两个部分,使得代价最小 到这题上就是板子了 代码 #include <cstdio> #include <alg ...
- P3121 [USACO15FEB]审查（黄金）Censoring (Gold)
吐槽 数据太水了吧,我AC自动机的trie建错了结果只是RE了两个点,还以为数组开小了改了好久 思路 看到多模板串,字符串匹配,且模板串总长度不长,就想到AC自动机 然后用栈维护当前的字符串位置,如果 ...
- Java中常用的方法
枚举: 1:DemoEnum.valueOf(String str) 从枚举类中中找字符串,如果有则返回对应枚举值 2:DemoEnum.values() 获得枚举集合 3:DemoEnum.prop ...
- GET和POST中文乱码的解决方法
如果表单中含有中文,采用GET或者POST提交请求时,getParameter()方法接收到的参数值乱码. 1.乱码产生的原因 请求参数通过浏览器发送给Tomcat服务器,浏览器发送编码,但是tomc ...
- 【转载】谈谈自己对REST、SOA、SOAP、RPC、ICE、ESB、BPM知识汇总及理解
转载自:https://blog.csdn.net/tantexian/article/details/48196453 SOA: 维基百科解释:SOA:面向服务的软件架构(Service Orien ...
- CAS Client集群环境的Session问题及解决方案 不能退出登录
casclient源代码下载链接:https://github.com/apereo/java-cas-client cas官网链接:https://www.apereo.org/projects/c ...
- 【OJ】 : 容斥原理计算出 1< =n < 1e9 中是2,3,5倍数的整数的数量
最近ACM时遇到个题,题意如下. 问题描述: 有个1到n的数列,数一下其中能够被 2, 的时候有 ,,,,.这5个数满足条件,所以我们应该输出 5 . 输入 多组输入到文件尾,每组输入一个 n (n ...