# 开发常用样式

## flex:水平方向-垂直居中

![flex垂直居中](https://github.com/ougege/blog/blob/master/Images/CSS/%E5%BC%80%E5%8F%91%E5%B8%B8%E7%94%A8%E6%A0%B7%E5%BC%8F/demo_01.png)

::: code-group

```HTML
<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>

```

```CSS
.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垂直居中](https://github.com/ougege/blog/blob/master/Images/CSS/%E5%BC%80%E5%8F%91%E5%B8%B8%E7%94%A8%E6%A0%B7%E5%BC%8F/demo_02.png)

::: code-group

```HTML
<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>
```

```CSS
.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-一端固定一端自适应](https://github.com/ougege/blog/blob/master/Images/CSS/%E5%BC%80%E5%8F%91%E5%B8%B8%E7%94%A8%E6%A0%B7%E5%BC%8F/demo_04.png)

::: code-group

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

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

:::

## 文字两端且均分对齐

![文字两端且均分对齐](https://github.com/ougege/blog/blob/master/Images/CSS/%E5%BC%80%E5%8F%91%E5%B8%B8%E7%94%A8%E6%A0%B7%E5%BC%8F/demo_03.png)

::: code-group

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

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

:::