Center align content with flexbox

Question

Given the following markup, I need to get the header and icon on the left to move to the center above the content on the right when display is below 768px. I have the flexbox layout setup, but can't get the flex wrap to work for the two parts of the component for a responsive layout.

.FeaturesDetailed-keyFeaturesWrapper-236 {
  display: flex;
  margin-bottom: 100px;
  flex-direction: column;
  flex-wrap: wrap;
}

.FeaturesDetailed-keyFeatureTile-237 {
  margin: 0 auto;
  margin-bottom: -66px;
}

.FeaturesDetailed-keyFeatureIconWrap-243 {
  left: 35px;
  color: orange;
  position: relative;
}

.FeaturesDetailed-keyFeatureHeader-242 {
  width: 200px;
  color: #000;
  margin: -9px 0px 20px -165px;
  text-align: right;
}

.FeaturesDetailed-keyFeatureCopyWrap-238 {
  top: -145px;
  left: 120px;
  width: 600px;
  position: relative;
}

[class^="icon-"] {
  font-family: "icons" !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  speak: none;
}

.FeaturesDetailed-keyFeatureCopyWrap-238 {
  top: -145px;
  left: 120px;
  width: 600px;
  position: relative;
}

@media (max-width: 768px) {
  .FeaturesDetailed-keyFeatureTile-237 {
    flex-direction: column;
    flex-flow: wrap;
    width: 400px;
    margin: 0 auto;
    margin-top: 2.5rem;
  }
}

<div class="FeaturesDetailed-keyFeaturesWrapper-236">
  <div class="FeaturesDetailed-keyFeatureTile-237">
    <div class="FeaturesDetailed-keyFeatureIconWrap-243">
      <p class="FeaturesDetailed-keyFeatureHeader-242">Header content here</p><span class="wrap-icon Icon-root-115 FeaturesDetailed-Icon-239"><style>.icon-clone:before { content: "\e90d"}</style><span aria-hidden="true" class="icon-clone" style="font-size: 52px; line-height: 52px;"></span></span>
    </div>
    <div class="FeaturesDetailed-keyFeatureCopyWrap-238">
      <p class="FeaturesDetailed-heading-240">Lots of content here.</p>
      <p class="FeaturesDetailed-subtext-241">Subsection of content here</p>
    </div>
  </div>
</div>

JSFiddle link: Link

Gaspar Teixeira · Accepted Answer · 2018-09-14T17:49:18.907

What about:

.FeaturesDetailed-keyFeaturesWrapper-236 {
  margin-bottom: 100px;
}

.FeaturesDetailed-keyFeatureTile-237 {
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.FeaturesDetailed-keyFeatureIconWrap-243 {
  color: orange;
  text-align:center;
}

.FeaturesDetailed-keyFeatureHeader-242 {
  color: #000;
  text-align: center;
}

.FeaturesDetailed-Icon-239 {
  color: orange;
  position: relative;
}

.FeaturesDetailed-keyFeatureCopyWrap-238 {
  width: 70%;
}

[class^="icon-"] {
  font-family: "icons" !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  speak: none;
}


@media (max-width: 768px) {
  .FeaturesDetailed-keyFeatureTile-237,
  .FeaturesDetailed-keyFeatureCopyWrap-238,
  .FeaturesDetailed-keyFeatureIconWrap-243{
    display: block;
    width: 100%;
  }
}

The two sections aren't wrapping to begin with, so that isn't having an affect. — Matt, Sep 14 '18 at 17:07
Solving the problem without flexbox is easy. Block elements stack vertically by default. The question was how to solve the problem using flex. — Michael Benjamin, Sep 14 '18 at 19:12

score 0 · Answer 2 · answered Sep 14 '18 at 19:10

The scope of flex layout is the parent-child relationship. Flex properties don't work outside this limited scope.

The flex properties in your media query are being ignored because the target element is not a flex container.

.FeaturesDetailed-keyFeatureTile-237 {
  margin: 0 auto;
  margin-bottom: -66px;
}

@media (max-width: 768px) {
  .FeaturesDetailed-keyFeatureTile-237 {
    flex-direction: column;
    flex-flow: wrap;
    width: 400px;
    margin: 0 auto;
    margin-top: 2.5rem;
  }

Where is display: flex? Because it's not there you're working in a block formatting context where flex properties do not apply.

Try something along these lines (I've removed lots of unrelated code for demo purposes):

.FeaturesDetailed-keyFeaturesWrapper-236 {
  display: flex;
  margin-bottom: 100px;
  flex-direction: column;
  flex-wrap: wrap;
}

.FeaturesDetailed-keyFeatureTile-237 {
  display: flex; /* new */
  margin: 0 auto;
  /* margin-bottom: -66px; */
}

.FeaturesDetailed-keyFeatureIconWrap-243 {
  /* left: 35px; */
  color: orange;
  flex: 0 0 200px;  /* new */
  border: 1px dashed black; /* demo */
  /* position: relative; */
}

.FeaturesDetailed-keyFeatureHeader-242 {
  /* width: 200px; */
  color: #000;
  /* margin: -9px 0px 20px -165px; */
  text-align: right;
}

.FeaturesDetailed-keyFeatureCopyWrap-238 {
  /* top: -145px;
  left: 120px;
  width: 600px; */
  flex: 0 0 600px; /* new */
  /*  position: relative; */
  border: 1px dashed red; /* demo */
}

[class^="icon-"] {
  font-family: "icons" !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  speak: none;
}

.FeaturesDetailed-keyFeatureCopyWrap-238 {
  top: -145px;
  left: 120px;
  width: 600px;
  /* position: relative; */
}

@media (max-width: 768px) {
  .FeaturesDetailed-keyFeatureTile-237 {
    flex-wrap: wrap;
    justify-content: center;
    width: 400px;
    margin: 0 auto;
    margin-top: 2.5rem;
  }
}

<div class="FeaturesDetailed-keyFeaturesWrapper-236">
  <div class="FeaturesDetailed-keyFeatureTile-237">
    <div class="FeaturesDetailed-keyFeatureIconWrap-243">
      <p class="FeaturesDetailed-keyFeatureHeader-242">Header content here</p><span class="wrap-icon Icon-root-115 FeaturesDetailed-Icon-239"><style>.icon-clone:before { content: "\e90d"}</style><span aria-hidden="true" class="icon-clone" style="font-size: 52px; line-height: 52px;"></span></span>
    </div>
    <div class="FeaturesDetailed-keyFeatureCopyWrap-238">
      <p class="FeaturesDetailed-heading-240">Lots of content here.</p>
      <p class="FeaturesDetailed-subtext-241">Subsection of content here</p>
    </div>
  </div>
</div>

jsFiddle demo

Related: Grid properties not working on elements inside grid container

Center align content with flexbox

2 Answers2

jsFiddle demo