使用flexbox的示例网格系统。

Question

我想使用flexbox实现这一目标：

1. textarea应保持固定，cols =“15”。
2. 仅使用1个Flexbox容器或尽可能少。
3. 最少额外的div。

/*Basic Grid Styles*/
.grid {
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
  justify-content: center;
  width:600px;
  height: 300px;
}
.grid-cell{
	height:300px;
}

<form action="" method="post">
<div class="grid">
<textarea rows="20" cols="15" name="" class="grid-cell"></textarea>
<div class="grid-cell">
<input type="submit" value="10 >>> 13" name="submit_a" class=""/>
<input type="submit" value="10 <<< 13" name="submit_b" class=""/>
</div>
<textarea rows="20" cols="15" name="" class="grid-cell"></textarea>
</form>

Answer 1

只需使用public extension UIImage { public var hasContent: Bool { return cgImage != nil || ciImage != nil } } 与供应商前缀进行后备，并删除中间容器的高度（以实现完美和自动的垂直居中）

align-items

/*Basic Grid Styles*/
.grid {
  display: flex;
  -ms-flex-align: center; /* IE */
  -webkit-align-items: center; /* Chrome / Safari */
  -webkit-box-align: center; /* Chrome / Safari */
  align-items: center; /* standard */
  justify-content: center;
  width:600px;
  height: 300px;
}

Answer 2

正确地，对齐和按钮按照您想要的方式定位。

＆＃13;

＆＃13;

/*Basic Grid Styles*/
.grid {
  display: flex;
  -ms-flex-align: center; /* IE */
  -webkit-align-items: center; /* Chrome / Safari */
  -webkit-box-align: center; /* Chrome / Safari */
  align-items: center; /* standard */
  justify-content: center;
  width:600px;
  height: 300px;
}

.grid-cell {
margin : 5px 20px;
}

＆＃13;

<form action="" method="post">
  <div class="grid">
    <textarea rows="20" cols="15" name="" class="grid-cell"></textarea>
    <div class="grid-cell">
      <input type="submit" value="10 >>> 13" name="submit_a" class=""/><br/><br/>
      <input type="submit" value="10 <<< 13" name="submit_b" class=""/>
    </div>
    <textarea rows="20" cols="15" name="" class="grid-cell"></textarea>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;