使用css弹性盒子模型

时间:2022-01-13 10:42:50

提示: 当期内容不充实, 修改后再来看吧

以下称:弹性子元素: 子元素, 弹性容器: 容器

弹性盒子的属性

1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示

2. 弹性元素默认显示在弹性容器的同一行内(既:弹性盒子默认包含一行)

3. flex-direction: 规定子元素在容器内的排列顺序:

  row: 水平: 左对齐

  row-reverse: 水平 逆序右对齐

  column: 垂直: 上对齐

  column-reverse: 垂直 逆序下对齐

4. justify-content: 规定子元素在容器内水平方向上的对齐方式

  flex-start: 默认 左对齐

  flex-end: 右对齐

  center: 居中对齐

  space-between: 均匀分布对齐 贴合容器!!!

  space-around: 均匀分布对齐 均匀距离容器!!!

5. align-items规定子元素在容器内纵轴上的对齐方式

  flex-start: 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。

  flex-end: 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。

  center: 弹性盒子元素在该行的侧轴(纵轴)上居中对齐

  baseline: 如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,

        该值将参与基线对齐

  stretch: 如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,

      但同时会遵照'min/max-width/height'属性的限制

6. flex-wrap: 规定子元素在容器内换行方式 (wrap: 外套,包装的意思。nowrap不要外套,就一行,wrap:        要外套, 允许换行,包着子元素)

  nowrap: 默认 不换行

  wrap: 换行

  wrap-reverse: 换行 逆序

7. align-content: 规定子元素在容器中垂直方向上的对齐方式, 和justify-content相反

        (前提: 容器内允许换行,既存在多行子元素)

  flex-start: 默认 上对齐

  flex-end: 下对齐

  center: 居中对齐

  space-between: 均匀分布对齐 贴合容器上下!!!

  space-around: 均匀分布对齐 均匀距离容器左右!!!

默认特性:

  1. 弹性元素间默认没有间隙

   2. 弹性容器默认不改变弹性项目宽度

   3. 弹性布局默认左对齐

   4. flex-grow: 1, 则该项目默认拉伸占据该行剩余宽度。 默认值为0, 不拉伸。

   5. 弹性布局默认改变项目的高度, 如果没有指定项目的高度, 则默认充满项目高。(若弹性b元素改变了容器宽度, 则弹性a元素也将被拉伸)

   6. align-self指定了单个弹性元素在纵轴上的对其方式, 如果一个个设置该属性太麻烦, 则可以设置容器的align-items, 所有单个元素的align-self将会继承这个值。

 弹性子元素属性


1. order: 规定子元素在容器中的排列顺序, 用数值表示,越小越靠前, 可谓负数

2. margin: 自动获取盒子内水平和垂直方向的剩余空间,并设置最完美的距离。

  注: 设置margin:auto可是使子元素在容器内完美居中, 解决了多年来的元素居中问题

3. align-self设置元素自身在容器内纵轴方向上的对齐方式

  flex-start: 默认 上对齐

  flex-end: 下对齐

  center: 居中对齐

  basline: 如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐

  strench: 拉伸自身和容器高度相同

4. flex: 规定子元素在容器内如何占据空间,类似于bootstrap的栅格布局,相当于百分比的意思

  数值: 例如有三个子元素 flex值分别为2 1 1 , 则相当于witdh: 50% 25% 25%

 注意: 请使用默认值: auto: 自动拉伸;  none:不拉伸 

demo: 做一个类似淘宝移动端商品列表项(自如网面试题题):

需求:

使用css弹性盒子模型

HTML:

<div class="container">
<div class="left">
<div class="lcontent">
content
</div>
</div>
<div class="right">
<p class="title">
titltitletitletitletitlee titltitletitletitletitlee titltitletitletitletitlee
</p>
<p class="content">
content
</p>
<p class="time">
-- :
</p>
</div>
</div>

CSS:

.container {
display: flex;
display: -webkit-flex;
border: 1px solid #ddd;
width: 100%;
height: auto; flex-direction: row;
justify-content: space-between;
-webkit-justify-content: space-around;
align-content: space-around;
-webkit-align-content: space-around;
} .container .left,
.container .right{
// flex: 1;
width: 40%;
margin: 10;
} .container .left {
display: flex;
border: 1px solid #eee;
background-color: #eee;
border-radius: 15px;
} .container .left .lcontent {
margin: auto;
} .container .right .title {
font-weight: bolder;
} .container .right .content {
color: #ddd;
font-size: 14px;
} .container .right .time { font-size: 12px;
}

  效果:

使用css弹性盒子模型

* flex-basis和flex-grow的demo

使用css弹性盒子模型