flex-shrink和flex-basis属性不起作用

时间:2018-10-20 10:46:18

标签: css flexbox

您好,我最近开始使用flexbox,我不明白一些事情。首先,我不能让flex子级具有特定的宽度。我尝试使用width,flex-basis属性,但似乎没有任何作用。另一件事是flex-shrink属性不起作用。请帮忙!

.flexbox {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.flexchild {
  flex-shrink: 0;
  flex-basis: 20%;
  padding: 30px;
  font-family: 'Arial' sans-serif;
  flex: 1;
}

.flexchild:nth-child(2) {
  background-color: blue;
}

.flexchild:nth-child(3) {
  background-color: green;
}

.flexchild:nth-child(4) {
  background-color: yellow;
}
<div class="flexbox">
  <div class="flexchild">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div class="flexchild">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proidentest.</div>
  <div class="flexchild">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
  <div class="flexchild">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>

0 个答案:

没有答案