Выровнять содержимое по центру с помощью flexbox

Question

Учитывая следующую разметку, мне нужно получить заголовок и значок слева, чтобы переместиться в центр над содержимым справа, когда дисплей меньше 768 пикселей.У меня есть настройка макета flexbox, но я не могу заставить работать гибкую обертку для двух частей компонента для адаптивного макета.

.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: Ссылка

Answer 1

Область действия гибкого макета - это родительские и дочерние отношения.Свойства Flex не работают вне этой ограниченной области.

Свойства flex в вашем медиазапросе игнорируются, поскольку целевой элемент не является контейнером flex.

.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;
  }

Где находится display: flex?Поскольку это не там, вы работаете в контексте форматирования блока, где свойства flex не применяются.

Попробуйте что-то вроде этого (я удалил много несвязанного кода для демонстрационных целей):

.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: Свойства сетки не работают с элементами внутри контейнера сетки

Answer 2

А как же:

.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%;
  }
}