Question

您好我正在练习CSS弹性盒子，一切都很顺利但是当我尝试使用align-self属性时，它的所有值都可以像flex-start，flex-end，center等一样工作但是伸展的一个赢了这里的工作是代码

＆＃13;

nextLevel

＆＃13;

#flexcontainer {
  border: 3px solid black;
  display: flex;
  flex-wrap: wrap;
  height: 450px;
  justify-content: space-around;
  max-width: 500px;
  margin: 150px auto;
}
.flexitem {
  background: yellow;
  width: 48%;
  height: 115px;
  text-align: center;
  line-height: 115px;
}
.one {
  align-self: stretch;
}

＆＃13;

Answer 1

.flexitem上的问题已修复height: auto，因此您可以使用#flexcontainer { border: 3px solid black; display: flex; flex-wrap: wrap; height: 450px; justify-content: space-around; max-width: 500px; margin: 150px auto; } .flexitem { background: yellow; width: 48%; height: 115px; text-align: center; line-height: 115px; } .one { height: auto; }覆盖

<div id="flexcontainer">
  <div class="flexitem one">1</div>
  <div class="flexitem two">2</div>
</div>

$("#course_outline").validate({

    rules: {

        ignore: [],

        errorClass: "",

        course_code: {required: true},

        subject_name: {required: true},

        time_allocation: {required: true},

        lecturer: {required: true},

        subject_status: {required: true},

        agree: "required"

    },

    messages: {

        course_code: {required: "Course Code Mandatory"},

        subject_name: {required: "Subject Name Is Mandatory"},

        time_allocation: {required: "Time  is mandatory" },

        lecturer: { required: "Lecturer is mandatory" },

        subject_status: {required: "Subject Status is mandatory"},

        agree: "policy are acccept"
    }
});

Answer 2

另一种可行的解决方案。

＆＃13;

 #flexcontainer
 {
 border: 3px solid black;
 display: flex;
 flex-wrap: wrap;
 height: 450px;
 justify-content: space-around;
 max-width : 500px;
 margin: 150px auto;
}
.flexitem
{
 background: yellow;
 width : 48%;
 height: auto;
 text-align: center;
 line-height: 115px;
  
  /*Added*/
 align-self: flex-start;
}

.one {
  align-self: stretch;
}

＆＃13;

<div id="flexcontainer">
    <div class="flexitem one">1</div> 
    <div class="flexitem two">2</div> 
   </div>

＆＃13;

align-self stretch不工作？

2 个答案: