开发常用样式

flex:水平方向-垂直居中

flex垂直居中

::: code-group

<div class="flex-ul row">
  <div class="flex-li">
    <div class="li-info">111</div>
  </div>
  <div class="flex-li">
    <div class="li-info">222</div>
  </div>
  <div class="flex-li">
    <div class="li-info">333</div>
  </div>
</div>

.flex-ul{
  width:100%;
  display: flex;
}
.flex-ul.row{
  flex-direction: row;
}
.flex-ul.column{
  flex-direction: column;
}
.flex-ul > .flex-li{
  display: flex;
  flex-grow: 1;
  justify-content:center;
  align-items: center;
  height:auto;
}
.flex-ul .flex-li .li-info{
  flex-grow: 1;
  height:30px;
  line-height: 30px;
}
.flex-ul .flex-li .li-info {
  border:solid 1px #ddd;
}
.flex-label{
  flex-grow: 1;
}
.flex-content{
  flex-grow: 4;
}

:::

flex:垂直方向-垂直居中

flex垂直居中

::: code-group

<div class="flex-ul column">
  <div class="flex-li">
    <div class="li-info">111</div>
  </div>
  <div class="flex-li">
    <div class="li-info">222</div>
  </div>
  <div class="flex-li">
    <div class="li-info">333</div>
  </div>
</div>

.flex-ul{
  width:100%;
  display: flex;
}
.flex-ul.row{
  flex-direction: row;
}
.flex-ul.column{
  flex-direction: column;
}
.flex-ul > .flex-li{
  display: flex;
  flex-grow: 1;
  justify-content:center;
  align-items: center;
  height:auto;
}
.flex-ul .flex-li .li-info{
  flex-grow: 1;
  height:30px;
  line-height: 30px;
}
.flex-ul .flex-li .li-info {
  border:solid 1px #ddd;
}
.flex-label{
  flex-grow: 1;
}
.flex-content{
  flex-grow: 4;
}

:::

flex:一端固定一端自适应

flex-一端固定一端自适应

::: code-group

<div class="flex">
  <div class="left">自适应</div>
  <div class="right">固定</div>
</div>

.flex {
  display: flex;
}
.flex .left {
  flex: 1;
  background: #eee;
}
.flex .right {
  width: 40px;
  background: #999;
}

:::

文字两端且均分对齐

文字两端且均分对齐

::: code-group

<div class="space">O U G E G E</div>

.space {
  display: block;
  text-align: justify;
}
.space::after {
  content: '';
  display: inline-block;
  width: 100%;
}

:::