Home>

html - display: flex;

I'm thinking of making a three-column configuration, but the heights are not aligned.
I'm doing the ul details part of the list in div, but
It does n’t work.


    
       aaaa 
      
        
      
      
             aaaaa 
      <p>aaaaa</p>
      <ul>
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
      </ul>
            
          
         See details 
         
    
    
       bbbb 
      
      
      
            
       bbbbbb 
      <p>bbbbb</p>
        <ul>
        <li>bbbbb</li>
        <li>bbbbb</li>
        <li>bbbbb</li>
        </ul>
                  
              
         See details 
            
    
    
       cccccc 
      
      
      
            
       ccccccc 
      <p>
      </p>
      <ul>
          <li>cccc</li>
          <li>cccc</li>
          <li>cccc</li>
      </ul>
                 
              
         See details 
        
    
. content-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
        justify-content: space-around;
    align-content: space-around;
    width: auto;
    margin: 5px 0;
    padding: 0;
}
.content-item {
    display: block;
    background-color: #ffffff;
    padding: 10px 10px;
    border: solid #ffffff;
    border-width: 1px;
    width: 30%;
    height: 100%;
    margin: 10px 0px;
    border-radius: 24px;
    box-shadow: 1px 1px 10px -5px rgba (0.3,0.7,0.4,0.8);
}
.details {
    display: block;
    text-align: center;
    border: solid # 000000;
    border-width: 1px;
    margin: 0 auto;
}
 .mainbox {
     display: block;
     height: 30%;
     width: auto;
 }
 .image-box {
  width: 90%;
  height: 50%;
  margin: 0 auto;
  padding: 5px 0px;
}
html css
  • Answer # 1

    No parent height set. By removing theheightproperty to the flex item, I think you can do what the questioner wants to do (operation check link). This time, we are not doing anything because we are out of question, but if you do this, you will need to adjust the height of each element in the flex item. In addition,wrapis set in theflex-wrapproperty, so I will describe it as a precaution, but the height of all elements including the folded elementUse Grid Layoutif you want to align

    . content-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
  width: auto;
  margin: 5px 0;
  padding: 0;
}
.content-item {
  display: block;
  background-color: #ffffff;
  padding: 10px 10px;
  border: solid #ffffff;
  border-width: 1px;
  width: 30%;
  margin: 10px 0px;
  border-radius: 24px;
  box-shadow: 1px 1px 10px -5px rgba (0.3, 0.7, 0.4, 0.8);
}
.details {
  display: block;
  text-align: center;
  border: solid # 000000;
  border-width: 1px;
  margin: 0 auto;
}
.mainbox {
  display: block;
  height: 30%;
  width: auto;
}
.image-box {
  width: 90%;
  height: 50%;
  margin: 0 auto;
  padding: 5px 0px;
}

  • Answer # 2

    Are you looking for something like the following?

    . content-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
  width: auto;
  margin: 5px 0;
  padding: 0;
}
.content-item {
  display: flex;/* fix * /
  flex-direction: column;/* Add * /
  background-color: #ffffff;
  padding: 10px 10px;
  border: solid #ffffff;
  border-width: 1px;
  width: 30%;
/ * height: 100%;* // * delete * /
  margin: 10px 0px;
  border-radius: 24px;
  box-shadow: 1px 1px 10px -5px rgba (0.3,0.7,0.4,0.8);
}
.details {
  display: block;
  text-align: center;
  border: solid # 000000;
  border-width: 1px;
  margin: 0 auto;
  width: 90%;/* add * /
  margin-top: Auto;/* Add * /
}
 .mainbox {
   display: block;
/ * height: 30%;* /
   width: auto;
}
 .image-box {
  width: 90%;
/ * height: 50%;* // * delete * /
  margin: 0 auto;
  padding: 5px 0px;
}
.image-item {
  width: 100%;
}

    Operation check sample

    What you are doing is to specify the height of the parent element (Flex container) by not specifying the height of the child element (Flex item).

    After that, I'd probably want to see "details" at the bottom, so set.content-itemto flex and place it vertically,margin-top : Auto;has been aligned to the bottom.

Related articles