前端未来页面布局发展方向是 Flexbox 还是 Grid?
Flexbox目前支持的浏览器要比Grid多,但是Flexbox&Grid flex的加载貌似有点问题,不知道未来的发展方向如何?
(另外求大神推荐几个不错的Flexbox和Grid布局的网站实例)
回复内容:
我觉得这两个不是非要二选一的。可能两个都会实现,然后在不同场景下选取更合适的那个。 技术只是会越来越先进,至于什么时候能支持,不是规范能决定的,应该是各大主流浏览器来决定,就拿flexbox来说,早期也仅是实验性的,但目测现在主流浏览器或多或少都支持。而现在的grid就类似于当初的flexbox一样。至于布局,要做到杂志那样的排版还是离不开shape这样的。另外一个就是案例,flexbox的案例在手机上常能看到了,而Grid现在还没有实际项目使用吧(我还没有看到过)。有关于这两方面的资料,也收集过一些,感 兴趣的可以看看:
1、flexbox:flexbox | 博客自由标签
2、Grid:css3 grid layout 泻药,没研究过。
不知道。
只好纯扯扯蛋:
从规范编辑者角度来入手
CSS Flexible Box Layout Module Level 1
历任编辑 Microsoft 、Opera、Mozilla、Google 的人都有。
CSS Grid Layout Module Level 1
历任编辑 Microsoft、Mozilla、Google
其中微软的人参与的比较多。
再看浏览器支持:
Grid: Can I use... Support tables for HTML5, CSS3, etc
Flexible Box:Can I use... Support tables for HTML5, CSS3, etc
Grid 基本上就IE10以后版本支持,可见跟规范历任编辑所属公司参与程度有关系,隐约指向这货是微软"喜爱"的东东么。
好在有 Google 的人说不好未来什么时候 webkit 系的支持了也不好说。
Flexible Box 就不同了,基本上是全民(厂商)参与的节奏么,支持性也好的多。
所以吧,也就只能说 Flex 是现在时,Grid 或许是个将来时,以后的事儿谁知道呢。
然后你说的 Flex 加载有问题是,偶没看懂。
是指它在有其它列进来时候缩小重现布局了一下么?
不知道它这个演示怎么写的样式,所以仍然是不知道啊不知道。
如果非要扯点啥凑字数的话……那么偶觉得挺正常啊,弹性盒么。
没东西(没有可计算的宽度)在旁边的时候总要“弹一弹”的 = =||| 左右有可算出实际宽度的容器来了,自己只好就被挤扁扁了。
要不是这样,不成固定盒了。
而 Grid 看规范示例内意思是划分网格,猜它这个固定列宽了,所以,总体有多少列宽度是多少布局引擎开始就计算完成。然后就刷刷的填内容,不再需要重算布局位置了。 国内的技术比国外慢一拍,所以肯定是先成熟的技术就流行起来了,我们不是还在用float吗 我来正面回答这个问题:发展方向必然是Flexbox胜过grid
原因是:
grid可以实现的大多数场景下Flexbox都能胜任,而flexbox能实现的用grid就很难了。
所以grid不会消失,但只能在相对小众的需求上发展,而更多的应用会使用flexbox方式。
布局实例就不找了,自己搜索分析比别人推荐的效果要好得多。 如果是移动端,我觉得grid很给力,一直想用,如果是PC端,玩玩还行,做项目还差好几年呢,你知道ie8还有多少嘛 不请自来,刚好看到这个,也感兴趣。
Flexbox布局最适合应用程序的组件和小规模的布局,而Grid布局更适合那些更大规模的布局。
一个完整的Flexbox指南 这个很完整,可以看看。 南京某小公司,本人只学过flex,用的最多的还是float。。。。。现状是感觉flex还是挺好的,灵活,对于移动端的场景的解决方案也不错啊,文档也不少,grid就不清楚了,未来发展就更不清楚,不敢强答,我先用着float,学好flex,用flex多做几个项目再说吧。 今天刚好在看。
“Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Gridlayout is intended for larger scale layouts.”https://css-tricks.com/snippets/css/a-guide-to-flexbox/和上面那位仁兄说的应该是一个意思。
不过这篇文章的时间有点久了。不知道现在发展怎么样了。

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











H5에서 위치 속성을 유연하게 사용하는 방법 H5 개발에서는 요소의 위치 지정 및 레이아웃이 관련되는 경우가 많습니다. 이때 CSS 위치 속성이 작동하게 됩니다. 위치 속성은 상대 위치 지정, 절대 위치 지정, 고정 위치 지정 및 고정 위치 지정을 포함하여 페이지에서 요소의 위치 지정을 제어할 수 있습니다. 이번 글에서는 H5 개발에서 position 속성을 유연하게 활용하는 방법을 자세히 소개하겠습니다.

Flex 레이아웃의 일반적인 속성은 무엇입니까? 특정 코드 예제가 필요합니다. Flex 레이아웃은 반응형 웹 페이지 레이아웃을 디자인하기 위한 강력한 도구입니다. 유연한 속성 집합을 사용하여 웹 페이지 요소의 배열과 크기를 쉽게 제어할 수 있습니다. 이 기사에서는 Flex 레이아웃의 공통 속성을 소개하고 구체적인 코드 예제를 제공합니다. display: 요소의 표시 모드를 Flex로 설정합니다. .container{display:flex;}flex-directi

프론트엔드 인터뷰에서 CSS를 사용하여 주사위/마작 레이아웃을 구현하는 방법에 대한 질문을 자주 받습니다. 다음 기사에서는 CSS를 사용하여 3D 주사위를 만드는 방법을 소개합니다(Flex 및 Grid 레이아웃은 3D 주사위를 구현함).

HTML 튜토리얼: 적응형 동일 높이, 동일 너비, 동일 간격 레이아웃을 위해 Flexbox를 사용하는 방법, 특정 코드 예제가 필요합니다. 소개: 최신 웹 디자인에서 레이아웃은 매우 중요한 요소입니다. 많은 양의 콘텐츠를 표시해야 하는 페이지의 경우, 가시성과 사용 편의성을 높이기 위해 요소의 위치와 크기를 어떻게 합리적으로 배치하는가가 중요한 문제입니다. Flexbox(Flexible Box Layout)는 다양한 유연한 레이아웃 요구 사항을 쉽게 실현할 수 있는 매우 강력한 도구입니다. 이 기사에서는 Flexbox를 자세히 소개합니다.

CSS 레이아웃 속성 최적화 팁: positionsticky 및 flexbox 웹 개발에서 레이아웃은 매우 중요한 측면입니다. 좋은 레이아웃 구조는 사용자 경험을 향상시키고 페이지를 더욱 아름답고 탐색하기 쉽게 만들 수 있습니다. CSS 레이아웃 속성은 이 목표를 달성하는 데 핵심입니다. 이 기사에서는 일반적으로 사용되는 두 가지 CSS 레이아웃 속성 최적화 기술인 positionsticky와 flexbox를 소개하고 구체적인 코드 예제를 제공합니다. 1. 직위

AMP 코인이란 무엇입니까? AMP 토큰은 Synereo 플랫폼의 주요 거래 통화로 2015년 Synereo 팀에 의해 만들어졌습니다. AMP 토큰은 다양한 기능과 용도를 통해 사용자에게 더 나은 디지털 경제 경험을 제공하는 것을 목표로 합니다. AMP 토큰의 목적 AMP 토큰은 Synereo 플랫폼에서 다양한 역할과 기능을 가지고 있습니다. 첫째, 플랫폼의 암호화폐 보상 시스템의 일부로서 사용자는 콘텐츠를 공유하고 홍보함으로써 AMP 보상을 얻을 수 있으며, 이는 사용자가 플랫폼 활동에 보다 적극적으로 참여하도록 장려하는 메커니즘입니다. AMP 토큰은 Synereo 플랫폼에서 콘텐츠를 홍보하고 배포하는 데에도 사용할 수 있습니다. 사용자는 AMP 토큰을 사용하여 더 많은 시청자가 보고 공유하도록 유도함으로써 플랫폼에서 콘텐츠의 가시성을 높일 수 있습니다.

개발 중에 flex 속성은 flex:1 또는 flex: 1 1 auto와 같은 유연한 상자의 하위 요소에 대해 작동하는 데 자주 사용됩니다. 그렇다면 이 속성은 요소의 동작을 어떻게 제어합니까? flex:1이 정확히 무엇을 의미하나요? 이 기사를 통해 flex 속성을 철저하게 이해할 수 있습니다!

이 기사는 CSS Flex 레이아웃의 세 가지 속성인 flex-grow, flex-shrink 및 flex-basis에 대한 심층적인 이해를 제공합니다. 도움이 되기를 바랍니다.
