将图像和文本与flex容器项中的类对齐

Question

我正在尝试用css flex创建我自己的基本网格系统。我想在flex项目容器中使用用于文本和图像对齐的类。

我需要帮助理解做这件事的最好方法。

这是我目前所拥有的：

​

.flex-footer {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  background-color:#330066;
}

.item {
  height: 100px;
  padding: 5px;
  margin : 5px;
  background: tomato;
}

.flex-footer > .item > div {
  display: table;
}

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

.item > .bottom-center {
  align-self: flex-end;
  /*display : table-cell;*/
  /*vertical-align: bottom;*/
  /*flex-direction: column;*/
  /*align-items: flex-end;*/
  /*align-self: flex-end; */
  /*align-content: flex-end;*/
  /*justify-content: center;*/
}

.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }


.col-4 {
  width: 25%;  
}

 <div class="flex-footer">
    
  <div class="item col-4 order-3">
  <div class="top-left">text (top left) a</div>
  <div class="middle-left">text (middle left)</div>
  <div class="bottom left">text (bottom left)</div>
  </div>

  <div class="item col-4 order-1">
  <div class="bottom-center">text (middle center)</div>
  </div>

  <div class="item col-4 order-2">
  <div class="">text (top right)</div>
  <div class="middle-center">image (middle center)</div>
  <div>ul/litext </div>
  </div>

</div>

​

我的jsfiddle示例如下：https://jsfiddle.net/svwp24m6/

Answer 1

您还需要向所有.item%s添加display: flex。

以下是我所理解的您想要做的事情，以及flex如何做到这一点的一些示例。

.item中的margin使项目变得比.flex-footer的宽度更大。我很少在flex元素中使用边距，因为在设置flex-basis时需要考虑到这一点(使用calc())。遗憾的是，在flex容器中没有考虑到边际。

​

.flex-footer {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  background-color:#330066;
}

.item {
  display: flex;
  justify-content: center;
  align-content: center;
  height: 100px;
  padding: 5px;
  margin : 5px;
  box-sizing: border-box; /* to include padding in the element's width */
  background: tomato;
}

.item.order-2 {
   flex-direction: row-reverse;
}

.item.order-3 {
   justify-content: left;
}

/*.flex-footer > .item > div {
  display: table;
}*/

 .top {
   align-self: start;
 }

 .middle {
   align-self: center;
 }

 .bottom {
   align-self: end;
 }

.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }


.col-4 > div {
  flex-basis: 25%;
  /*width: 25%;  */
}

 <div class="flex-footer">
    
  <div class="item col-4 order-3">
    <div class="top left">text (top left) a</div>
    <div class="middle left">text (middle left)</div>
    <div class="bottom left">text (bottom left)</div>
  </div>

  <div class="item col-4 order-1">
    <div class="middle center">text (middle center)</div>
  </div>

  <div class="item col-4 order-2">
    <div class="top right">text (top right)</div>
    <div class="middle center">image (middle center)</div>
    <div>ul/litext </div>
  </div>

</div>

​