Flexbox는 Safari에서 첫 번째 행의 마지막 열을 감 쌉니다.

Flexbox는 Safari에서 첫 번째 행의 마지막 열을 감 쌉니다.

---

Safari 및 기타 iOS 기반 브라우저에서 볼 때 첫 번째 행의 마지막 열은 다음 행으로 줄 바꿈됩니다.

원정 여행:

크롬 / 기타 :

암호:

.flexthis {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flexthis .col-md-4 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

<div class="row flexthis">
  <div class="col-md-4 col-sm-6 text-center">
    <div class="product">
      <img src="img.jpg" alt="" class="img-responsive">
      <h3>Name</h3>
      <p>Description</p>
    </div>
  </div>
</div>

---

설명

이것은 Safari가 : before 및 : after 가상 요소를 실제 요소 인 것처럼 처리하기 때문에 발생합니다. 예를 들어 7 개의 항목이있는 컨테이너를 생각해보십시오. 컨테이너에 : before 및 : after가있는 경우 Safari는 항목을 다음과 같이 배치합니다.

[:before ] [1st-item] [2nd-item]

[3rd-item] [4th-item] [5th-item]

[6th-item] [7th-item] [:after  ]

해결책

허용되는 답변의 대안으로 HTML을 변경하는 대신 플렉스 컨테이너에서 : before & : after를 제거합니다. 귀하의 경우 :

.flexthis.container:before,
.flexthis.container:after,
.flexthis.row:before,
.flexthis.row:after {
   content: normal; // IE doesn't support `initial`
}

---

내 질문에 대한 업데이트

이것이 제가 사용하는 솔루션입니다. 이것은 Flexbox와 호환되는 Bootstrap4에 대해 분명히 수정되었습니다. 따라서 이것은 bootstrap3에만 해당됩니다.

.row.flexthis:after, .row.flexthis:before{
  display: none;
}

---

I know the issue is quite old, but I ran into this issue today, and wasted over 12 hours in fixing it. Though about 10 hours out of that were spent in realizing that safari is failing with 12-column bootstrap grid, and it is no other issue.

Fix that I made is rather simple. Here is the version for Visual Composer. Class names may vary for other frameworks.

.vc_row-flex:before, .vc_row-flex:after{
  width: 0;
}

---

I didn't want to add more classes to fix this kind of bug, so alternatively you can fix the .row class itself.

.row {
    &:before {
        content: none;
    }

    &:after {
        content: '';
    }
} 

---

Found this issue trying to do a simple grid using Bootstrap for the TwentyThree CMS, and got the same bug in Safari. Anyway, this solved it for me:

.flex-container:before {
  display: inline;
}

---

I was able to fix it by adding

.row:before, .row:after {
display: flex !important;
}

Obviously this isn't the most elegant solution but it may work for some in the meantime until they fix it.

---

I've spent a few hours on this issue as well. In my case I inserted flexbox in an existing project to make all elements in a row have the same height. All browsers except Safari rendered it correctly, but none of the above answers seemed to fix my problem.

Until I discovered that there still was a Bootstrap clearfix hack being used: (code is from a laravel project, but generic Bootstrap otherwise)

@foreach ($articles as $key => $article)
    @if ($key % 3 === 0)
        <div class="clearfix hidden-xs hidden-sm"></div>
    @endif
    @if ($key % 2 === 0)
        <div class="clearfix hidden-lg hidden-md"></div>
    @endif

    etc...
@endforeach

Apparently, other browsers than Safari ignore the .clearfix in some way when flexbox is being used.

So, when using flexbox on your columns, there is no need to use Bootstrap's clearfix anymore.

---

Bootstrap 4 have issues with display: block; property when set either from css or from javascript on the .row class. I figured a solution for this Just create a class as:

.display-block {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-ms-flex-wrap: wrap !important;
	flex-wrap: wrap !important;
}

And then apply this class when you want to display the row.

---

This seems to be a bug in Safari's rendering causing the columns to overflow (and therefore wrap) the Bootstrap container (some kind of Webkit rounding error maybe?). Since you are using Bootstrap, you should be able to achieve the desired result without using flex:

<div class="row">
    <div class="col-md-4 col-sm-6 text-center">
        <div class="product">
            <img src="img.jpg" alt="" class="img-responsive">
            <h3>Name</h3>
            <p>Description</p>
        </div>
    </div>
</div>
<style>
    .product {
        /* this is to automatically center and prevent overflow
           on very narrow viewports */
        display: inline-block;
        max-width: 100%;
    }
</style>

But! Now the problem looking at your example is that you need to keep your product blocks the exact same size or the grid won't keep it's shape. One possible solution is to give .product a fixed height and adjust using media queries.

Here is an example I made that works in Safari and other browsers: http://codepen.io/anon/pen/PZbNMX Additionally, you can use style rules to keep images or description text within a certain size to make things easier to maintain.

또 다른 가능한 해결책은 스크립트 또는 jQuery 플러그인을 사용하여보다 동적 인 균일 한 크기 조정을 허용하는 것입니다.하지만 저는 그 정도에 익숙하지 않습니다.

Safari를 사용하여 flex와 Bootstrap을 결합하려고 할 때 동일한 문제가 발생했기 때문에 도움이 되었기를 바랍니다.

---

나는 같은 문제가 있었고 대답은 사파리의 Flex 상자가 디스플레이 인 동일한 div에서 수레가 지워지는 것을 좋아하지 않는다는 것입니다.

---

.row:before, .row:after {
content:'';
display:block;
width:100%;
height:0;
}
.row:after {
clear:both;
}

참고 URL : https://stackoverflow.com/questions/34250282/flexbox-wraps-last-column-of-the-first-row-in-safari