在此页

• Why do we need logical properties?
• Block and inline dimensions
• 浏览器支持
• 另请参阅
• 相关话题

The Logical Properties and Values Specification introduces flow-relative mappings for many of the properties and values in CSS. This article introduces the specification, and explains flow relative properties and values.

Why do we need logical properties?

CSS traditionally has sized things according to the physical dimensions of the screen. Therefore we describe boxes as having a width and height , position items from the top and left , float things left, assign borders, margin, and padding to the top , right , bottom , left , etc. The Logical Properties and Values specification defines mappings for these physical values to their logical, or flow relative, counterparts — e.g. start and end as opposed to left and right / top and bottom .

An example of why these mappings might be needed is as follows. I have a Layout using CSS Grid, the grid container has a width applied and I am using the align-self and justify-self properties to align the items. These properties are flow relative — justify-self: start aligns the item to the start on the inline dimension, align-self: start does the same on the block dimension.

If I now change the writing mode of this component to vertical-rl 使用 writing-mode property, the alignment continues to work in the same way. The inline dimension is now running vertically and the block dimension horizontally. The grid doesn't look the same however, as the width assigned to the container is a horizontal measure, a measure tied to the physical and not the logical or flow relative running of the text.

If instead of the width property we use the logical property inline-size , the component now works the same way no matter which writing mode it is displayed using.

You can try this out in the live example below. Change writing-mode from vertical-rl to horizontal-tb on .grid to see how the different properties change the layout.

When working with a site in a writing mode other than a horizontal, top to bottom one, or when using writing modes for creative reasons, being able to relate to the flow of the content makes a lot of sense.

Block and inline dimensions

A key concept of working with flow relative properties and values is the two dimensions of block and inline. As we saw above, newer CSS layout methods such as Flexbox and Grid Layout use the concepts of block and inline 而不是 right and left / top and bottom when aligning items.

inline dimension is the dimension along which a line of text runs in the writing mode in use. Therefore, in an English document with the text running horizontally left to right, or an Arabic document with the text running horizontally right to left, the inline dimension is horizontal . Switch to a vertical writing mode (e.g. a Japanese document) and the inline dimension is now vertical , as lines in that writing mode run vertically.

The block dimension is the other dimension, and the direction in which blocks — such as paragraphs — display one after the other. In English and Arabic these run vertically, whereas in any vertical writing mode these run horizontally.

The below diagram shows the inline and block directions in a horizontal writing mode:

This diagram shows block and inline in a vertical writing mode:

浏览器支持

Logical Properties and Values can be thought of as a couple of groups in terms of current browser support. Some of the properties are essentially mappings from the physical versions, for example inline-size for width or margin-inline-start 而不是 margin-left . These mapped properties are starting to see good browser support, and if you look at the individual pages for the properties in the reference here on MDN you will see that Edge is the only modern browser currently missing these.

There are then a group of properties which do not have a direct mapping in terms of existing physical properties. These are shorthands made possible by the fact that we can refer to both edges of the block or inline dimension at once. An example would be margin-block , which is a shorthand setting for margin-block-start and margin-block-end .

注意 : The CSS Working Group are currently trying to decide what to do about the four-value shorthands for logical properties, for example the equivalents to setting four physical properties at once, like margins with the margin property. We would need some kind of modifier if we were to reuse margin for flow-relative properties. If you would like to read the suggestions or comment on them the relevant GitHub issue is #1282 .

Testing for browser support

You can test for support of logical properties and values using feature queries. For example you could set a width , test for inline-size and, if it is supported, set the width to auto 和 inline-size to the original width 值。

另请参阅

• Box Alignment in Grid Layout
• Box Alignment in Flex Layout
• Understanding Logical Properties and Values
• Writing Modes

元数据

• 最后修改： May 8, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS Logical Properties
4. 指南

   1. Basic concepts of Logical Properties and Values
   2. Logical properties for floating and positioning
   3. Logical properties for margins, borders and padding
   4. Logical properties for sizing
5. 特性

   1. block-size
   2. border-block
   3. border-block-color
   4. border-block-end
   5. border-block-end-color
   6. border-block-end-style
   7. border-block-end-width
   8. border-block-start
   9. border-block-start-color
   10. border-block-start-style
   11. border-block-start-width
   12. border-block-style
   13. border-block-width
   14. border-end-end-radius
   15. border-end-start-radius
   16. border-inline
   17. border-inline-color
   18. border-inline-end
   19. border-inline-end-color
   20. border-inline-end-style
   21. border-inline-end-width
   22. border-inline-start
   23. border-inline-start-color
   24. border-inline-start-style
   25. border-inline-start-width
   26. border-inline-style
   27. border-inline-width
   28. border-start-end-radius
   29. border-start-start-radius
   30. inline-size
   31. inset
   32. inset-block
   33. inset-block-end
   34. inset-block-start
   35. inset-inline
   36. inset-inline-end
   37. inset-inline-start
   38. margin-block
   39. margin-block-end
   40. margin-block-start
   41. margin-inline
   42. margin-inline-end
   43. margin-inline-start
   44. max-block-size
   45. max-inline-size
   46. min-block-size
   47. min-inline-size
   48. padding-block
   49. padding-block-end
   50. padding-block-start
   51. padding-inline
   52. padding-inline-end
   53. padding-inline-start