New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Flex布局下设置每个item的width不生效 #11

Open

AILINGANGEL opened this issue Jul 9, 2019 · 0 comments

Owner

AILINGANGEL commented Jul 9, 2019 •

edited

Loading

问题描述
如果用width指定flex-item的宽度，当其中一个的宽度不够的时候，会挤压相邻的两个flex-item，如下图所示

<div class="row">
  <div class="div1">div1div</div>
  <div class="div2">div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2div2divaaaaaaaaza</div>
  <div class="div3">div3</div>
</div>

.row {
  display: flex;
  justify-content: space-between;
}

.div1 {
  background-color: red;
  width: 100px;
/*   flex-basis: 100px;
  flex-grow: 0;
  flex-shrink: 0; */
}

.div2 {
  background-color: green;
/*   word-break: break-all; */
}

.div3 {
  background-color: blue;
  width: 100px;
/*   flex-basis: 100px;
  flex-shrink: 0; */
}

解决方案

.div1 {
    flex-basis: 100px;
    flex-grow: 0;
    flex-shrink: 0;
}

参考stackoverflow 查看

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment