HTML & CSS flexbox

I'd like to use a flexible box in the CSS to arrange it like this, but how can I arrange it well?
I'm sorry it's hard to see😓
src=

<article class="main">
      <div class="content">
        <h1>0th floor</h1>
        <div class="room-contents">
          <div class="roomNumber-item1">
            <p>171</p>
          </div>
          <div class="capacity-item2">
            <ul>
              <li>30&#047;60</li>
            </ul>
          </div>
          <div class="roomTeacher-item3">
            <ul>
              <li>Name</li>
            </ul>
          </div>
          <div class="facility-item4">
            <ul>
              <li>0</li>
              <li>0</li>
              <li>0</li>
            </ul>
          </div>

          <div class="classSymbol-item5">
            <ul>
              <li> Class </li>
              <li> Class </li>
              <li> Class </li>
            </ul>
          </div>
        </div>
      </div>

html css html5

2022-09-30 21:40

1 Answers

What the questioner wants to do is as follows:

This code allows flex items to be folded in the flex-wrap property, and applies flex:1 to all flex items except .roomTeacher-item3..roomTeacher-item3 should not immediately fill in the remaining flex items.

Now, if you set the margin-right property to 100% and the min-width property to set the minimum width, you do not need to use the min-width property to calculate the value of the margin-right property with the calc

body{
  margin:0;
}

ul{
  margin:0;
  padding:0;
  list-style: none;
}

.contents{
  display:flex;
  flex-direction:column;
  height —100vh;
}

.room-contents{
  display:flex;
  flex:1;
  flex-wrap:wrap;
  margin:0;
  padding:0;
}

.room-contents>div:not (.roomTeacher-item3){
  height —40%;
  flex:1;
}

.roomTeacher-item3{
  min-width: 50%;
  height: 20%;
  margin-right —100%;
}

.roomNumber-item1{
  background: #ffa;
}

.capacity-item2 {
  background: #faf;
}

.roomTeacher-item3{
  background: #faa;
}

.facility-item4{
  background: #aff;
}

.classSymbol-item5{
  background: #afa;
}

<article class="main">
  <div class="content">
    <h1>0th floor</h1>
    <div class="room-contents">
      <div class="roomNumber-item1">
        <p>171</p>
      </div>
      <div class="capacity-item2">
        <ul>
          <li>30&#047;60</li>
        </ul>
      </div>
      <div class="roomTeacher-item3">
        <ul>
          <li>Name</li>
        </ul>
      </div>
      <div class="facility-item4">
        <ul>
          <li>0</li>
          <li>0</li>
          <li>0</li>
        </ul>
      </div>

      <div class="classSymbol-item5">
        <ul>
          <li> Class </li>
          <li> Class </li>
          <li> Class </li>
        </ul>
      </div>
    </div>
  </div>
</article>



		
		
			

				

					
				

				
					2022-09-30 21:40

			
			If you have any answers or tips



		

	
		Popular Tags
	
	python x 4647
android x 1593
java x 1494
javascript x 1427
c x 927
c++ x 878
ruby-on-rails x 696
php x 692
python3 x 685
html x 656
	


	
		Popular Questions
	
	
	709 When building Fast API+Uvicorn environment with PyInstaller, console=False results in an error

	980 In Java servlet, when SHA-256 sends WW-Authenticate header for digest authentication, the client does not return the result.

	642 /usr/bin/google-chrome:symbol lookup error:/usr/bin/google-chrome: undefined symbol:gbm_bo_get_modifier

	557 Scrap text information after the "View More" button when searching in the Yahoo! News search window

	546 Understanding How to Configure Google API Key