CSS3 弹性布局

html-css030

CSS3 弹性布局,第1张

flex 是 flexible box 的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性。能够高效方便的控制元素的对齐、排列,自动计算布局内元素的尺寸,无论元素的尺寸是固定的还是动态的,控制元素在页面的布局方向。

弹性盒子由弹性容器(flex container)和弹性子元素(flex item)组成。

弹性容器设置属性 display:flex

一、容器属性

flex-flow 复合属性,是 flex-direction 和 flex-wrap 的简写形式。 默认值:flex-flow: row nowrap

⑴ flex-direction 子元素排列方向

flex-direction: row从左到右

flex-direction: row-reverse从右到左

flex-direction: column从上到下

flex-direction: column-reverse从下到上

⑵ flex-wrap 子元素换行方式

flex-wrap: nowrap不换行

flex-wrap:wrap换行

flex-wrap: wrap-reverse反转 wrap 排列,行颠倒

2 justify-content 子元素沿主轴对齐方式

justify-content: flex-start

justify-content: space-between

3 align-items 子元素在交叉轴上对齐方式

align-items: center垂直方向居中

align-items:flex-start垂直方向的顶部/交叉轴的起点对齐

align-items: flex-end垂直方向的底部/交叉轴的终点对齐

align-items: baseline项目的第一行的文字的基线对齐

align-items: stretch默认值,如果项目未设置高度或设为auto,将占满整个容器的高度

二、子元素属性(写在子元素下)

align-self 用于设置弹性子元素自身在侧轴(纵轴)方向上的对齐方式。允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。

align-items: center

align-items: flex-start

align-items: flex-end

align-items: baseline

align-items: stretch

order 定义子元素的排列顺序。数值越小,排列越靠前,默认为order: 0,可以为负值。

flex-grow 定义子元素的扩展比率,主要作用:分配剩余空间。负值无效。

flex-grow: 0默认值,即如果存在剩余空间,也不放大。

flex-grow: 1如果存在剩余空间,放大 ,等分剩余空间。

flex-shrink 定义子元素的收缩比率,值越大,按比例缩的就越小。

flex-shrink: 1默认值,即如果空间不足,缩小。

flex-shrink: 0不缩小。

flex-basis 定义元素的默认基准值。

设置了flex-basis,width就不起作用;同时存在的时候,优先使用flex-basis。

如果容器的宽度太小,子元素排列不下,设置的flex-basis的宽度会自动缩小,直到占满容器。

链接:https://juejin.cn/post/7038088241437736991

第一步.布局:

<div class="wrap">

<div class="left"></div>

<div class="right"></div>

</div>

第二步.样式:

这里的选择就很多了,可以根据自己是用在什么平台上选择最简单的方法:

PC端:那么方法就可以是通过

1.浮动(float),

2.定位position(这个不建议拿来布局),

3.display:inline-block(这个需要和vertical-align: top配合使用,不然会造成顶部不对其的现象)

移动端:那么就建议使用css3display:box布局(最好多加一句display:-webkit-box),因为CSS3的布局可以做到各种适应屏幕,非常强大。并且有非常好的兼容性,不像PC端的兼容性。

1.目前来说对css支持最好的公认的是火狐浏览器,错位的原因在css代码书写不规范。bai

2.兼容性:对于CSS(样式表)并不是所有浏览器的所有版本都支持的很好,比如IE5以前的浏览器对于CSS的支持就不是很好。而现在使用IE5以前版本浏览器的用户不在少数,这样就使得在页面制作的过程中需要针对不同浏览器版本进行测试,以保证兼容性,无形中也增加很多工作量(至少我接触的开发人员制作div页面比table页面的标准时间要长一些)。

3.对css缩写的支持问题:

不论是ie 还是ff对css的缩写都有一小点问题比如border: 0xp solid #fff两个浏览器支持都没有问题

但对于四个边的magin不同情况下,就不能用这种缩写了,无论是ie还是ff又会出现边界解释错误,而导致页面变形正确缩写:border-width:0px 1px 2px 3px

border-style:solid

border-color:#fff

第二点是 ie对于css的magin padding 等默认值为0px,但ff却不一样,为了保持外观的统一性,即使padding为0你也要写上,以免ff在浏览中的错位。

IE与Firefox的CSS兼容大全 1.DOCTYPE 影响 CSS 处理

2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式,值得注意的是,一定要将xxxx !important 这句放置在另一句之上

6.div 的垂直居中问题: vertical-align:middle将行距增加到和整个DIV一样高 line-height:200px然后插入文字,就垂直居中了。缺点是要控制内容不要换行

7.cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以

8.FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。

9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:div{margin:30px!importantmargin:28px}

注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:div{maring:30pxmargin:28px}