居中布局与Flex

Lesliewaong
173 阅读5分钟

居中布局

水平居中

  • text-align: center（行内内容（例如文字）如何相对它的块父元素对齐）不能直接用于行内元素
  • margin: 0 auto
  • absolute + transform
  • flex + justify-content: center

垂直居中

  • line-height: height（基线之间的距离，行距=line-height-font-size，推荐在设置 line-height 时使用无单位数值）注意子元素是否存在margin。

    HfTxdH.png

  • absolute + transform

  • flex + align-items: center

  • table、grid

水平垂直居中

HTML

<div class="wp">
    <div class="box size">123123</div>
</div>

公共代码

/* 公共代码 */
.wp {
    border: 1px solid red;
    width: 300px;
    height: 300px;
}
​
.box {
    background: green;    
}
​
.box.size{
    width: 100px;
    height: 100px;
}

居中元素定宽高

absolute + 负margin

.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

absolute + margin auto

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

居中元素不定宽高

absolute + transform

top,left跟根据父元素的宽和高偏移的。

transform: translate(-50%, -50%);是根据自身的宽高偏移的。

注意子元素是否存在margin。

.wp{
  position: relative;  
 
}     
.center{
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}  

flex + justify-content + align-items

目前在移动端已经完全可以使用flex了，PC端需要看自己业务的兼容性情况。

.wp {
    display: flex;
    justify-content: center;
    align-items: center;
}

Flex

Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒模型提供最大的灵活性。任何一个容器都可以指定为Flex布局

基本概念

采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。

其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。

o4UXgP.png

容器默认存在两根主轴：水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。

  • main start/main end：主轴开始位置/结束位置；
  • cross start/cross end：交叉轴开始位置/结束位置；
  • main size/cross size：单个项目占据主轴/交叉轴的空间；

容器属性

flex-direction

决定主轴的方向（即项目的排列方向）

.box {
   flex-direction: row | row-reverse | column | column-reverse;
}
  • row（默认）：主轴水平方向，起点在左端；
  • row-reverse：主轴水平方向，起点在右端；
  • column：主轴垂直方向，起点在上边沿；
  • column-reserve：主轴垂直方向，起点在下边沿。

flex-wrap

定义换行情况

默认情况下，项目都排列在一条轴线上，但有可能一条轴线排不下。

.box{
   flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap（默认）：不换行；
  • wrap：换行，第一行在上方；
  • wrap-reverse：换行，第一行在下方。

flex-flow

flex-direction和flex-wrap的简写，默认row nowrap

.box{
    flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content

定义项目在主轴上的对齐方式。

对齐方式与轴的方向有关，本文中假设主轴从左到右。

.box {
   justify-content: start | end | flex-start | flex-end | center | left | right | space-between | space-around | space-evenly | stretch | safe | unsafe | baseline | first baseline | last baseline;
}
  • flex-start（默认值）：左对齐；
  • flex-end：右对齐；
  • center：居中；常用作水平居中
  • space-between：两端对齐，项目之间间隔相等；
  • space-around：每个项目两侧的间隔相等，即项目之间的间隔比项目与边框的间隔大一倍。

align-items

定义在交叉轴上的对齐方式

对齐方式与交叉轴的方向有关，假设交叉轴从上到下。

.box{
    align-items: flex-start | flex-end | center | baseline | stretch;
}
  • flex-start：起点对齐；
  • flex-end：终点对齐；
  • center：中点对齐；常用作垂直居中
  • baseline：项目的第一行文字的基线对齐；
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content

定义多根轴线的对齐方式

如果项目只有一根轴线，该属性不起作用。 所以，容器必须设置flex-wrap：···；

.box{
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
  • flex-start：与交叉轴的起点对齐；
  • flex-end：与交叉轴的终点对齐；
  • center：与交叉轴的中点对齐；
  • space-between：与交叉轴的两端对齐，轴线之间的间隔平均分布；
  • space-around：每根轴线两侧的间隔相等，即轴线之间的间隔比轴线与边框的间隔大一倍；
  • stretch（默认值）：轴线占满整个交叉轴。

项目的属性

flex

flex-grow，flex-shrink和flex-basis的简写

默认值为0 1 auto，第一个属性必须，后两个属性可选。

可以用 flex:auto; 代替 flex: 1 1 auto;；可以用 flex: none;代替 flex: 0 0 auto；

flex-grow

定义项目的放大比例

默认值为0，即如果空间有剩余，也不放大。 可以是小数，按比例占据剩余空间。

flex-grow：1或flex：1，经常用作自适应布局

flex-shrink

定义项目的缩小比例

默认值都为1，即如果空间不足将等比例缩小。 如果有一个项目的值为0，其他项目为1，当空间不足时，该项目不缩小。 负值对该属性无效，容器不应该设置flex-wrap。

flex-basis

定义在分配多余空间之前，项目占据的主轴空间。

默认值为auto，浏览器根据此属性检查主轴是否有多余空间。

align-self

允许单个项目与其他项目有不一样的对齐方式

默认值为auto，表示继承父元素的align-items属性，并可以覆盖align-items属性。

order

定义项目的排列顺序。

数值越小，排列越靠前，默认为0，可以是负值。

.item {
    order: <整数>;
}
avatar
文章
阅读
粉丝