HTML

Question

我有如下所示的要求：

|[]                  [][]|

视口左侧的一个元素和视口右侧的两个元素。要学习display: flex，我正在尝试此布局而不包含元素。

这种布局是否适用于flexbox？

这是HTML：

<div class="parent">
    <div class="child child--left"></div>
    <div class="child child--right"></div>
    <div class="child child--right"></div>
</div>

我尝试使用align-items和align-self但没有用。请帮忙。

CSS：

.parent{
     display: flex;  // flexbox
}

Answer 1

您可以在右侧所需的div中使用margin-left:auto：

＆＃13;

.parent {
  display: flex;
  height: 100px;
  width: 100%;
}

.child {
  flex: 0 0 20px;
  border: solid 1px green;
}

.child--right {
  margin-left: auto;
}

＆＃13;

<div class="parent">
  <div class="child"></div>
  <div class="child child--right"></div>
  <div class="child"></div>
</div>

＆＃13;

Answer 2

您需要使用定义为spacer的{{1}}才能按预期对齐灵活方框： DEMO

<强> CSS

flex:auto;

您的 HTML 将是：

.parent{
  display:flex;
}
.spacer{
  flex:auto;
}

Answer 3

您可以使用flex填充空格

＆＃13;

body {
  margin: 0;
}

.flex {
  display: flex;
  background: purple;
  width: 100%;
  height: 75px;
}
.item {
  background: orange;
  width: 50px;
  height: 50px;
  margin: 12.5px;
}
.filler {
  flex-grow: 1;
}

＆＃13;

<div class="flex">
  <div class="item"></div>
  <div class="filler"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

＆＃13;

您会注意到我已经在课程filler中添加了div并将其设置为flex-grow: 1;这意味着div将始终占用剩余空间。

Answer 4

在弹性项目的子级上应用：margin-<direction>: auto实际上会使项目向相反方向浮动（没有float的并发症。）

.child--right {
  margin-left: auto;
}

Answer 5

不使用额外填充元素的方法是使用自动边距。

<强> CSS

.child--left {
    margin-right: auto; /* <== here's the auto margin */
}

它会在.child--left的右侧添加一个边距，这将填补.parent内的可用空间（基本上就像左右儿童之间的填充元素一样，但实际上没有填料元素）

Answer 6

HTML

   <div class="parent">
        <div class="child child--left"><div class="box"></div></div>
        <div class="child child--right"><div class="box"></div></div>
        <div class="child child--right"><div class="box"></div></div>
    </div>

的CSS

   .parent{
      display: flex;
      justify-content: center;
    }

    .box{
      width: 200px;
      height: 200px;
      background: #333;
      margin: 20px
    }

来源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

小提琴：https://jsfiddle.net/rittamdebnath/315wps5g/

使用flex对齐项目

6 个答案:

HTML

的CSS