如何使flexbox项目大小相等？

Question

here is JSfaddle

我是css的初学者。我试图使用CSS flexbox项目相同的大小，但它没有工作。我在 stackoverflow 上发现了同样的问题，这些答案无法解决我的问题。

＆＃13;

＆＃13;

.container {
  display: flex;
}

.flx {
  text-align: center;
  color: #fff;
  flex: 1;
}

.flx:nth-child(1) {
  background-color: green;
}

.flx:nth-child(2) {
  background-color: red;
}

.flx:nth-child(3) {
  background-color: blue;
}

.flx:nth-child(4) {
  background-color: aqua;
}

＆＃13;

<div class="container">
  <div class="flx">
    alsldkj;lasdfj;l;asf
  </div>
  <div class="flx">
    asd
  </div>
  <div class="flx">
    asdfasdlfja;lsdfj;lasdfaasdfasdfasdfasdfasdfasdfasdfsadfasdfasdfasdfasdf>alsdflasdflasldjflasdjffla<br />sdjfalsdjfasdf
    <br /> asdfasdlfja;lsdfj;lasdfaasdfasdfasdfasdfasdfasdfasdfs
    <br />adfasdfasdfasdfasdf>alsdflasdflasldjflasdjfflasdjfalsdjfasdf
    <br />
  </div>
  <div class="flx">
    asfdasdfasdfasasf
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您只需将overflow-x:auto添加到您的班级flx即可。 以下是工作片段..

.container {
	display: flex;
}
.flx {
	
	text-align: center;
	color: #fff;
	flex: 1;
	overflow: auto;
}

.flx:nth-child(1) {
	background-color: green;
}

.flx:nth-child(2) {
	background-color: red;
}

.flx:nth-child(3) {
	background-color: blue;
}

.flx:nth-child(4) {
	background-color: aqua;
}

<div class="container">

	<div class="flx">
		alsldkj;lasdfj;l;asf
	</div>
	<div class="flx">
	asd
	</div>
	<div class="flx">
	asdfasdlfja;lsdfj;lasdfaasdfasdfasdfasdfasdfasdfasdfsadfasdfasdfasdfasdf>alsdflasdflasldjflasdjffla<br />sdjfalsdjfasdf
	<br />
	asdfasdlfja;lsdfj;lasdfaasdfasdfasdfasdfasdfasdfasdfs<br />adfasdfasdfasdfasdf>alsdflasdflasldjflasdjfflasdjfalsdjfasdf
	<br />
	</div>
	<div class="flx">
	asfdasdfasdfasasf
	</div>
	
	
</div>

Answer 2

<!-- hi Check this.. i am not sure this answer may help you.. add max-width of div -->

＆＃13;

＆＃13;

    .container {
      display: flex;
    }

    .flx {
      text-align: center;
      color: #fff;
      flex: 1;
  max-width:100px;
  width:100%;
    }

    .flx:nth-child(1) {
      background-color: green;
    }

    .flx:nth-child(2) {
      background-color: red;
    }

    .flx:nth-child(3) {
      background-color: blue;
    }

    .flx:nth-child(4) {
      background-color: aqua;
    }

.flx:nth-child(5) {
  background-color: orange;
}
.flx:nth-child(6) {
  background-color: yellow;
}

＆＃13;

    <div class="container">
      <div class="flx">
        alsldkj;lasdfj;l;asf
      </div>
      <div class="flx">
        asd
      </div>
      <div class="flx">
        asdfasdlfja;lsdfj;lasdfaasdfasdfasdfasdfasdfasdfasdfsadfasdfasdfasdfasdf>alsdflasdflasldjflasdjffla<br />sdjfalsdjfasdf
        <br /> asdfasdlfja;lsdfj;lasdfaasdfasdfasdfasdfasdfasdfasdfs
        <br />adfasdfasdfasdfasdf>alsdflasdflasldjflasdjfflasdjfalsdjfasdf
        <br />
      </div>
      <div class="flx">
        asfdasdfasdfasasf
      </div>
<div class="flx">
    asfdasdfasdfasasf
  </div>
   <div class="flx">
    asfdasdfasdfasasf
  </div>
    </div>

＆＃13;

＆＃13;

＆＃13;