Question

我试图基于CSS3 flex显示创建自己的小网格系统。我基本上有以下几个类：

一个grid类，它是一个flex容器，其flex方向设置为column。
一个row类，它是一个flex容器，其flex方向设置为row。
一组column类不同的弹性基础尺寸。

我想要的是通过设置row元素的self-align属性，能够将每一行对齐到左/中/右。但是，每当我尝试这样做时，事情似乎都会变坏。

这是一个展示它的傻瓜： http://plnkr.co/edit/mHOs7U28GCBJuPvi7ikJ?p=preview

HTML

  <!-- first row -->
  <div class="row align-end"> <!-- try to remove 'align-end' here -->
    <div class="column-1">
      <div class="item">1</div>
    </div>

    <div class="column-1">
      <div class="item">2</div>
    </div>
  </div>

  <!-- second row -->
  <div class="row">
    <div class="column-1">
      <div class="item">3</div>
    </div>

    <div class="column-2">
      <div class="item">4</div>
    </div>
  </div>

</div>

CSS

* {
  box-sizing: border-box;
}

.grid {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex-direction: row;
}

.column-1 {
  flex-basis: 33.33%;
  padding: 10px;
}

.column-2 {
  flex-basis: 66.67%;
  padding: 10px;
}

.column-3 {
  flex-basis: 100%;
  padding: 10px;
}

.align-start {
  align-self: flex-start;
}

.align-center {
  align-self: center;
}

.align-end {
  align-self: flex-end;
}

.item {
  background-color: lightblue;
  font-family: "Arial";
  text-align: center;
  padding: 4px;
}

正如你所看到的，在这个plunker中我设置了一个有两行的网格，每行有两列。第一行中的两列宽度为33.33％（flex-basis）。在第二行中，第一列的宽度为66.67％，第二列的宽度为33.33％。现在，由于第一行有一些未使用的空间，我想尝试将其对齐（无论出于何种原因）。因此，我添加了div，它代表了类align-end的第一行，它基本上只是将属性align-self: flex-end;添加到元素中。正如您所看到的那样，第一行看起来很糟糕，两列都向右对齐，但它们的宽度完全已损坏（您可以尝试从第一行中删除类＆＃39; align-end＆＃39; ，事情会恢复正常。）

我错过了什么？为什么行没有正确对齐？

谢谢，罗伊。

Answer 1

这是你要去的吗？ http://plnkr.co/edit/bFWMSQ7qj4Cuomzm0Ptv?p=preview

看起来你在第一行有2个第1列

  <!-- first row -->
  <div class="row align-end"> <!-- try to remove 'align-end' here -->
    <div class="column-1">
      <div class="item">1</div>
    </div>

    <div class="column-1">
      <div class="item">2</div>
    </div>
  </div>

******** *********编辑

经过一番挖掘，我想我知道你的意思。你试图左对齐第一个框并右对齐第二个框，在中间留下一个空白。

如果你添加margin-left：auto;它会处理行中剩余的剩余空间。 http://plnkr.co/edit/1Eoeh4uOik3BIZHsL9bH?p=preview

我将它添加到align-end类，所以无论何时使用align-end，它都会添加margin-left：auto;那个盒子。

Answer 2

控制子项沿主轴对齐方式的属性是justify-content

Date date = new Date();                                        
String formattedDate = new SimpleDateFormat("yyyy-MM-dd").format(date);                       
DateFormat format = new SimpleDateFormat("yyyy-MM-dd", Locale.ENGLISH);
date = format.parse(formattedDate);
System.out.println(date);

plunker

嵌套的flexbox和项目对齐

2 个答案: