flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content  1.display:flex;.box{flex-direction:row|row-reverse|column|column-reverse;//水平分布垂直分布}.box{flex-wrap:nowrap|wrap|wrap-reverse;//水平轴线换行不换行

原文链接：https://my.oschina.net/u/2296689/blog/545789varctrl:Boolean=event.ctrlKey;if(ctrl){ varcode:int=event.keyCode; if(code==70) newApplicationEvent(ApplicationEvent.TOGGLE_FULL_SCREEN).dispatch();}不可行：if(event.

 flex-direction属性决定主轴的方向（即项目的排列方向）。       row（默认值）：主轴为水平方向，起点在左端；       row-reverse：主轴在水平方向，起点在右端；       column：主轴为垂直方向，起点在上沿。       column-reverse：主轴为

1弹性布局简介弹性布局，又称“Flex布局”，是由W3C老大哥于2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持，我们可以放心大胆的使用。>>> 了解两个基本概念，接下来会频繁提到：①  容器： 需要添加弹性布局的父元素；② 

开始啦 1.flex-direction有关主轴的对齐方式column自上到下row自左到右-->默认值row-reverse自右到左column-reverse自下到上2.flex-wrap 有关弹性盒子的换行问题 warp 自左到右自上到下当宽度大于flex-box的宽度时，自动换行到下一

学习flex弹性布局总结目标掌握内容布局方式：flex弹性布局。认识flex是一种布局模式（用做内容布局）：称为弹性布局。作用控制容器内子元素的排布方式，对齐方式，排序顺序调整子元素的宽度，高度使其在不同分辨率下能更好的填充空间。子元素能很好的自适应容器

弹性盒 flexbil box or flexbox,        css3的一种布局模式,页面可以适应屏幕大小与设备确保元素保持原来布局的方式，由弹性容器flex container,弹性子元素flex item组成，设置display来实现。        x轴代表主轴，从左到右，y轴代表侧轴，从上到下,主轴不一定是

<divclass="flex-centerlisting-img"><imgv-if="item.imgUrl"v-bind:src="item.imgUrl"alt="notfindpicture"><imgv-if="!item.imgUrl"src="../../assets/img/detail-not-image.png&

CSS重叠样式表优先级1.范围优先级（范围大，优先级小）2.加载顺序（后加载优先级大）3.！important用法（1）行内使用，当前标签使用，优先级高，可以单独设置特殊样式（2）页内使用a{color:red;background-color:rgba(255,255,0,0.5);font-family:sans-serif;font-size:40px;}（3）

CSSFlex弹性盒模型布局教程Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。flex布局就是给任何一个容器添加 display:flex注：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。注：Safari6.1+（前缀-webkit-）iOS7.1+（前缀-web

flex.css能完美的运行在移动端的各种浏览器，甚至能运行在ie10+的各种PC端浏览器中flex和data-flexflex.css有两个版本，一个是flex.css一个是data-flex.css，这两个版本其实是一样的，唯一的区别是，一个是使用flex属性设置，一个是使用data-flex属性设置。react不支持flex属性直接布

before和after伪元素(详解)之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。

传统的CSS布局方式是基于盒模型（它是根据盒子与父盒子以及兄弟盒子的关系确定大小和位置的算法），实现时依赖于block,inline,table,position,float这些属性，但对于一些特殊布局不易实现，比如垂直居中。FlexboxLayout是一种新的布局方式，被称为弹性布局，它使得子元素（item

1.两侧固定，中间自适应.box{    width: 100%;    display: flex;    height: 300px;}.left{    width: 100px;    height: 200px;    background-color:red;}.right{    width: 100px;    height: 200px;    backgrou

原文链接：https://my.oschina.net/u/2296689/blog/545727HBox属性 horizontalGap="0"转载于:https://my.oschina.net/u/2296689/blog/545727

本文将从以下四个方面展开介绍：选择器样式表继承css3部分特性BFCcss选择器优先级策略先附上个链接：css选择器参考手册内联>id>class=属性选择器=伪类选择器>tag=伪元素选择器优先级的特殊情况：!important当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何

Wechangedtheaxislayoutwith'justify-content',andthe"offaxis"layoutiscontrolledby'align-items'.Themostcommonvaluesare flex-start, flex-end,or center.body{display:flex;flex-direction:row;}.container

练好弹性盒就得会练骰子下面是一些弹性盒的属性 弹性盒：控制子元素布局方式：display：flex使当前父元素变成弹性盒控制子元素主轴排列方向：（属性给父元素加）flex-direction:row默认轴X轴flex-direction:row-reverse主轴横向的相反

React-Nativeflex布局使用总结父视图属性(容器属性)：flexDirection:对子布局方向的设置row:从左到右依次排列row-reverse:从右向左依次排列column:(default)从上到下排列column-reverse:从下到上排列flexWrap:定义子布局是否在父布局中多行排列

原文链接：https://my.oschina.net/qiuzhping/blog/611686HBox是横向布局，VBox是重向布局。HBox、VBox组件都有属性horizontalAlign，horizontalCenter，verticalAlign，verticalCenter。而horizontalAlign，horizontalCenter是水平居中，verticalAlign，vertic

1、弹性布局的使用（1） display：flex；给父容器添加这个属性；（2） display:flex;容器添加弹性布局后，显示为块级元素；display:inline-flex;容器添加弹性布局后，显示为行级元素；（3） 设为Flex布局后，子元素的float、clear属性将失效。但是position属性，依然生效。2、作用于父容器的5个属

原文链接：https://www.mk2048.com/blog/blog.php?id=0jabjchkj&title=flex%E5%B8%83%E5%B1%80%E2%80%94%E2%80%94%E5%9B%9E%E9%A1%BEflex即为弹性布局。任何一个容器都可以指定为flex布局。.box{display:flex}行内元素可以使用flex

实现效果实现方法 整体布局由header、footer、content三部分组成，由绝对定位实现（position:absolute），header和footer部分设置高，中间部分自适应高度。其中content又分成left、right、middle三部分，由Flex布局实现，左右两边设置宽度，中间内容自适应宽度。代码HTML部分<divc

当外层容器使用flex布局，并且把flex-direction设置成colum的时候，内层容器的宽度会跟外层容器的宽度保持一致。在浏览器上的效果如下：当把外层容器的纵向布局不适用flex-direction，改用flex-wrap的时候，内层组件的宽度就不会被自动拉伸，此时的内层组件宽度会跟随内容宽度动态变化，如

一、常用清除浮动1、父级添加overflow:hidden；overflow:hidden;2、父级定义伪类:after.clearfix::after{content:'';clear:both;display:block;}参考：https://www.cnblogs.comxl0908/p/7245460.html 二、搜索框<divclass="searchbar">

align-conten和align-items之间的区别align-items:align-items属性适用于所有的flex容器，它是用来设置每个flex元素在侧轴上的默认对齐方式。align-items和align-content有相同的功能，不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。aligin-conten:

flex，弹性布局，是盒子更具有灵活性任何一个盒子都可以指定为flex布局。包括行内元素基本概念采用flex的元素，简称容器。他所有的子元素自动成为容器的成员，称为flex项目   容器默认有两根轴：水平的主轴和纵向的交叉轴，主轴的开始位置叫做mainstart,结束位置叫mainend；交叉轴开

BackgroundBackground-colorBackground-imageBackground-positionBackground-repeatBackground:colorimagerepeatposition;  1.Rgba()Rgb()OpacityRgba和opacityOpacity 不仅改变元素的背景透明度也改变元素间内容的透明度Rgba只改变背景颜色的透明度Opacity

align-items属性使用于所有的flex容器，它是用来设置每个flex元素在侧轴上的默认对齐方式aligin-items与align-content有相同的功能，不过不同点是它是用来让每一个单行元素在容器居中而不是让整个容器居中demo:align-items:单行元素：html:<divclass='flexBox'><divcl

 图片正常效果 图片变形效果一、flex-shrink:0给img设置flex-shrink:0;flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。设置为0表示不收缩。flex元素仅在默认宽度之和大于容器的时候才会