{"action":"created","issue":{"url":"https://api.github.com/repos/hoperyy/blog/issues/41","repository_url":"https://api.github.com/repos/hoperyy/blog","labels_url":"https://api.github.com/repos/hoperyy/blog/issues/41/labels{/name}","comments_url":"https://api.github.com/repos/hoperyy/blog/issues/41/comments","events_url":"https://api.github.com/repos/hoperyy/blog/issues/41/events","html_url":"https://github.com/hoperyy/blog/issues/41","id":238423440,"node_id":"MDU6SXNzdWUyMzg0MjM0NDA=","number":41,"title":"flex","user":{"login":"hoperyy","id":5757051,"node_id":"MDQ6VXNlcjU3NTcwNTE=","avatar_url":"https://avatars1.githubusercontent.com/u/5757051?v=4","gravatar_id":"","url":"https://api.github.com/users/hoperyy","html_url":"https://github.com/hoperyy","followers_url":"https://api.github.com/users/hoperyy/followers","following_url":"https://api.github.com/users/hoperyy/following{/other_user}","gists_url":"https://api.github.com/users/hoperyy/gists{/gist_id}","starred_url":"https://api.github.com/users/hoperyy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hoperyy/subscriptions","organizations_url":"https://api.github.com/users/hoperyy/orgs","repos_url":"https://api.github.com/users/hoperyy/repos","events_url":"https://api.github.com/users/hoperyy/events{/privacy}","received_events_url":"https://api.github.com/users/hoperyy/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2017-06-26T01:48:24Z","updated_at":"2018-10-28T23:55:24Z","closed_at":null,"author_association":"OWNER","body":"## 容器\r\n\r\n+   有两个轴：水平轴(main-start / main-end)和交叉轴(cross-start / cross-end)\r\n\r\n+   `flex-direction: row | row-reverse | column | column-reverse`\r\n\r\n    `row`: 水平轴，起点在**左端**。\r\n\r\n    `row-reverse`: 水平轴，起点在**右端**。\r\n\r\n    `column`: 交叉轴，起点在**上沿**。\r\n\r\n    `colunm-reverse`: 交叉轴，起点在**下沿**。\r\n\r\n+   `flex-wrap: nowrap | wrap | wrap-reverse`\r\n\r\n    默认不换行。\r\n\r\n    默认换行，是第一行在上面。\r\n\r\n    `wrap-reverse`，**是第一行在下面。**\r\n\r\n+   **综合 `flex-flow: <flex-direction> || <flex-wrap>`**\r\n\r\n    默认：`row nowrap`。\r\n\r\n+   `justify-content: flex-start | flex-end | center | space-between | space-around`\r\n\r\n    **标签：单轴线**\r\n    \r\n    **5 个属性**\r\n\r\n    **每个水平轴上滑动，顺序不变。**\r\n\r\n    `flex-start`: 左对齐\r\n\r\n    `flex-end`: 右对齐\r\n\r\n    `center`: 居中\r\n\r\n    `space-between`: 项目间距相等；**两端紧贴边框**\r\n\r\n    `space-around`: 项目间距相等；**项目之间的间隔比项目与边框之间的距离大一倍**\r\n\r\n+   `align-content: stretch | flex-start | flex-end | center | space-between | space-around`\r\n\r\n    **标签：多轴线**\r\n\r\n    **多轴线上下排序，顺序不变。**\r\n\r\n    **如果项目只有一根轴线，该属性不起作用。**\r\n\r\n    `stretch`: **默认值，轴线默认充满容器**\r\n\r\n    `flex-start`: 与交叉轴起点对齐\r\n\r\n    `flex-end`: 与交叉轴终点对齐\r\n\r\n    `center`: 与交叉轴中点对齐\r\n\r\n    `space-between`: 轴线间距相同；与交叉轴两端对齐\r\n\r\n    `space-around`: 轴线间距相同；轴线与框的距离是轴线之间举例的一半\r\n\r\n+   `align-items: stretch | flex-start | flex-end | center | baseline`\r\n\r\n    **标签：多纵线**\r\n\r\n    **5 个属性**\r\n\r\n    **与上面不同的是 `baseline | stretch`。**\r\n\r\n    **多个交叉轴上滑动。**\r\n\r\n    `stretch`: **默认值，默认充满容器高度。**\r\n\r\n    `flex-start`: 交叉轴**起点对齐**\r\n\r\n    `flex-end`: 交叉轴**终点对齐**\r\n\r\n    `baseline`: 项目**第一行文字的基线对齐**\r\n\r\n## 项目属性\r\n\r\n+   `order: 0`\r\n\r\n    顺序。数字越小，越靠前。\r\n\r\n    **可以为负值**\r\n\r\n+   `flex-grow: 0`\r\n\r\n    **非贪婪**\r\n\r\n    0: 不放大\r\n\r\n    如果所有项目的 `flex-grow`属性都为 1，则它们将等分剩余空间（如果有的话）。\r\n    \r\n    如果一个项目的 `flex-grow` 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。\r\n\r\n+   `flex-shrink: 1`\r\n\r\n    1: 可以缩小\r\n\r\n    如果所有项目的 `flex-shrink` 属性都为 1，当空间不足时，都将等比例缩小。\r\n    \r\n    如果一个项目的 `flex-shrink` 属性为 0，其他项目都为 1，则空间不足时，前者不缩小。\r\n\r\n+   `flex-basis: auto | <length>`\r\n\r\n    浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 `auto`，即项目的本来大小。\r\n\r\n+   `flex: none | [<flex-grow> | <flex-shrink> || <flex-basis>]`\r\n\r\n    快捷值：`auto: 1 1 auto;` 和 `none: 0 0 auto`\r\n\r\n+   `align-self: auto | flex-start | flex-end | center | baseline | stretch`\r\n\r\n    可覆盖容器设置的 `algin-item`。\r\n\r\n## 练习\r\n\r\n+   容器设置为 `display: flex;` 后\r\n    +   项目自动可设置宽高，即使是行内元素\r\n    +   如果单个项目不设置 `flex: 1`，就按照内容确定其宽度\r\n    +   如果单个项目设置 `flex: 1`，会充满容器宽度\r\n    +   多个项目，均设置了 `flex: 1`，就可以均分宽度了\r\n    +   多个项目，均设置 `flex-basis: 100%`，但同时容器不换行，这样也能均分。\r\n\r\n+   优先级\r\n\r\n    `nowrap` > `flex-basis` > `width`\r\n\r\n+   小技巧\r\n\r\n    先判断是否换行。\r\n\r\n    `flex-direction` 使用时思考起点。\r\n\r\n    考虑使用行或列。\r\n\r\n+   常见布局：`left - center - right`\r\n\r\n    `left`: `flex: 0 0 100px;`\r\n\r\n    `right`: `flex: 0 0 100px;`\r\n\r\n    `center`: `flex: 1`\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/hoperyy/blog/issues/comments/433754433","html_url":"https://github.com/hoperyy/blog/issues/41#issuecomment-433754433","issue_url":"https://api.github.com/repos/hoperyy/blog/issues/41","id":433754433,"node_id":"MDEyOklzc3VlQ29tbWVudDQzMzc1NDQzMw==","user":{"login":"hoperyy","id":5757051,"node_id":"MDQ6VXNlcjU3NTcwNTE=","avatar_url":"https://avatars1.githubusercontent.com/u/5757051?v=4","gravatar_id":"","url":"https://api.github.com/users/hoperyy","html_url":"https://github.com/hoperyy","followers_url":"https://api.github.com/users/hoperyy/followers","following_url":"https://api.github.com/users/hoperyy/following{/other_user}","gists_url":"https://api.github.com/users/hoperyy/gists{/gist_id}","starred_url":"https://api.github.com/users/hoperyy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hoperyy/subscriptions","organizations_url":"https://api.github.com/users/hoperyy/orgs","repos_url":"https://api.github.com/users/hoperyy/repos","events_url":"https://api.github.com/users/hoperyy/events{/privacy}","received_events_url":"https://api.github.com/users/hoperyy/received_events","type":"User","site_admin":false},"created_at":"2018-10-28T23:55:24Z","updated_at":"2018-10-28T23:55:24Z","author_association":"OWNER","body":"`flex-basis` 并不是宽度，而是占据主轴的空间，若 `flex-direction: column;`，项目的 `flex-basis` 就表现为高度，但项目本身的主轴还是 `row`\r\n![image](https://user-images.githubusercontent.com/5757051/47623744-e410b680-db4f-11e8-9a89-b9b5bf4c434c.png)\r\n![image](https://user-images.githubusercontent.com/5757051/47623751-f559c300-db4f-11e8-92e3-310b6084e5f4.png)\r\n"}}
{"actor":{"display_login":"hoperyy"}}