Why Does the Div Wrapper Alter My Page In This Way?-CodePudding

If I comment out my Div wrapper, the page becomes a jumbled mess, if the wrapper is not commented out, it is not a jumbled mess.

Why? My guess is that is is somehow shielded from the CSS, but I am not sure.

I am new so, I apologize in advance.

This exercise is part of the OdinProject, and is the first one I'm actually struggling with understanding.

html,
body {
  height: 100%;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

body {
  font-family: Roboto, sans-serif;
  margin: 0;
  background: #aaa;
  color: #333;
  /* I'll give you this one for free lol */
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: white;
  width: 480px;
  border-radius: 10px;
  box-shadow: 2px 4px 16px rgba(0, 0, 0, .2);
}

.icon {
  flex-shrink: 0;
  color: royalblue;
  font-size: 26px;
  font-weight: 700;
  background: lavender;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-button {
  background: #eee;
  border-radius: 50%;
  color: #888;
  font-weight: 400;
  font-size: 16px;
  height: 24px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

button {
  padding: 8px 16px;
  border-radius: 8px;
}

button.continue {
  background: royalblue;
  border: 1px solid royalblue;
  color: white;
}

button.cancel {
  background: white;
  border: 1px solid #ddd;
  color: royalblue;
}

.text {
  margin-bottom: 16px;
}

<div >
  <div >!</div>


  <div >
    <div >Are you sure you want to do that?
      <div >✖</div>
    </div>


    <div >text</div>
    <button >Continue</button>
    <button >Cancel</button>
  </div>

CodePudding user response：

Your .modal has the display: flex property. This property applies to all direct children of the .modal element.

If you remove the .wrapper, the elements in the modal are no longer grouped together and they are treated as separate flex items. This is why they appear side to side (.icon, then .header, then .text, then .button all on the same line).

Here is a great guide on the display: flex property.

CodePudding user response：

All HTML elements have default properties. A div has one: display: block;. In this case, when your wrapper div is removed, this property is removed it breaks the appearance because this default is battling the parent element's display: flex property.

Here's the default property list: https://www.w3schools.com/cssref/css_default_values.asp